jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ListBox › ListBox with DragDrop and DropTarget
Tagged: drag, dragdrop, drop, DropTarget, jqxListBox, ListBox, target
This topic contains 3 replies, has 4 voices, and was last updated by Peter Stoev 11 years, 2 months ago.
-
Author
-
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.
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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 ?
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 StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.