jQWidgets Forums

Tagged: drag, dragEnd, drop, jqxListBox, ListBox, reorder, sort

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 11 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Drag&drop, Sort,… combined question Posts

October 21, 2013 at 2:18 pm Drag&drop, Sort,… combined question #31123

Member

I have the following situation to cover with ListBox:

a) Two list boxes
b) Drag&drop in both ways
c) Reorder items with drag&drop in second box
d) Box one should always stay sorted alphabetically also after a drop to this box
e) No reorder with drag&drop in first box

a), b) and c) works fine.

Is there a way to achieve d) and e) out-of-the-box?
e.g.
–> d) something like: sortedByValue: true, staySorted: true
–> e) acceptReorder: true/false

Best Regards
Thomas

October 22, 2013 at 5:43 am Drag&drop, Sort,… combined question #31155

Dimitar

Participant

Hello Thomas,

Here is an example in which both functionalities are achieved:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var data1 = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha"
		        ];
            var data2 = [
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
                ];
            // Create a jqxListBox
            $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 200, height: 250, theme: theme,
                dragEnd: function (dragItem, dropItem) {
                    var dropListId = dropItem.element.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id;
                    if (dropListId == "listBoxA") {
                        return false;
                    };
                }
            });
            $("#listBoxB").jqxListBox({ allowDrop: true, allowDrag: true, source: data2, width: 200, height: 250, theme: theme });
            $("#listBoxB").on('dragEnd', function (event) {
                var args = event.args;
                var label = args.label;
                var value = args.value;
                var originalEvent = args.originalEvent;
                var items = $("#listBoxA").jqxListBox('getItems');
                var newListASource = new Array();
                for (var i = 0; i < items.length; i++) {
                    newListASource.push(items[i].label);
                };
                newListASource.sort();
                $("#listBoxA").jqxListBox({ source: newListASource });
            });
        });
    </script>
</head>
<body>
    <div style="float: left;" id="listBoxA">
    </div>
    <div style="margin-left: 20px; float: left;" id="listBoxB">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 22, 2013 at 7:38 am Drag&drop, Sort,… combined question #31168

thomasR

Member

Hello Dimitar,
thank you very much for your support.

Works like a charm.

Best Regards
Thomas

October 22, 2013 at 1:48 pm Drag&drop, Sort,… combined question #31194

thomasR

Member

Hello Dimitar,
we found that this solution is not working in all cases.
When catching endDrag for listbox A with

 $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 200, height: 250, theme: theme,
                dragEnd: function (dragItem, dropItem) {
                    var dropListId = dropItem.element.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id;
                    if (dropListId == "listBoxA") {
                        return false;
                    };
                }
            });

it is not possible to drop to an empty listbox B or within the lower area of box B.
In all these cases the determined dropListId is the ID of listbox A.

Trying to catch the complete Event also does not lead to a usable solution because listbox B is never mentioned in these data.

            jQuery("#listBoxA").on('dragEnd', function (event) {
                var args = event.args;
                console.log(event);
                console.log(args);
            });

With all possibilities we tested with the API it seems not to be possible to determine the corrent target.

Can you please help again.

Best Regards
Thomas

October 23, 2013 at 4:45 am Drag&drop, Sort,… combined question #31219

Dimitar

Participant

Hi Thomas,

We confirm the issue with the empty target listbox. However, we are able to successfully drop items from listbox A to the bottom of a populated listbox B.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.