jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ListBox › ListBox with DragDrop and DropTarget

Tagged: , , , , , ,

This topic contains 3 replies, has 4 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    ListBox with DragDrop and DropTarget Posts
  • December 8, 2013 at 7:51 pm ListBox with DragDrop and DropTarget #46162

    bmg125
    Participant

    I am trying to create a page that has a number of list boxes with drag and drop turned on. I’ve been successful with the basic implementation, but I am having a hard time controlling where things are allowed to be dragged and dropped to.

    For example:
    I have a ListBox1 and ListBox2 that should be allowed to drag/drop between them.
    Then I have a ListBoxA and ListBoxB that should be allowed to drag/drop between them.

    What I have right now is that any item from any ListBox is allowed to be dropped to any other ListBox.
    I see that jqxDragDrop has a dropTarget option, but I am unsure how to get the ListBox.dragDrop to use it.

    Thanks in advance for any help or direction.

    December 9, 2013 at 7:08 am ListBox with DragDrop and DropTarget #46177

    Dimitar
    Participant

    Hello bmg125,

    Here is an example. In this case, items from ListBox1 cannot be dragged to ListBox2. However, items from ListBox2 can be dragged to ListBox1.

    <!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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";

                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                ];

                var source2 = [
                    "Cafe mocha",
                    "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
                $("#ListBox1").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme, allowDrag: true, allowDrop: true,
                    dragEnd: function (dragItem, dropItem) {
                        // dragItem is the dragged Item.
                        // dropItem is the item under the mouse cursor when you dropped the dragged item.
                        var dropTargetId = dropItem.element.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id;
                        if (dropTargetId == "ListBox2")
                            return false;
                    }
                });
                $("#ListBox2").jqxListBox({ selectedIndex: 1, source: source2, width: 200, height: 250, theme: theme, allowDrag: true, allowDrop: true });
            });
        </script>
        <div id='ListBox1'>
        </div>
        <div id="ListBox2">
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

    December 27, 2013 at 3:05 pm ListBox with DragDrop and DropTarget #47011

    synologic
    Participant

    Dimitar,

    It looks like, if the receiving listbox is empty, the droptargetid is the listbox originating the item, and not the receiving box.

    This causes confusion if you need to drag the first item in an empty listbox.

    Is there any fix for this ?

    December 27, 2013 at 3:51 pm ListBox with DragDrop and DropTarget #47014

    Peter Stoev
    Keymaster

    Hi synologic,

    dropTargetID as far as I see from Dimitar’s code is the ID of an Item under the Mouse Cursor which means that if there’s no Items in a ListBox there would be no dropTargetID as there’s no item under the cursor. That is not confusing and according to me is expected. You may just check whether dragItem is equal to dropItem and if it is, then the target ListBox is empty.

    Best Regards,
    Peter Stoev

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.