jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › jqxDragDrop – Update drop Targets dynamically
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.
-
Author
-
Hi,
what is the best way, to keep the dropTarget’s always up to date?
I want to drag in a jqxTree, which is not fully loaded, but load subitems by clicking the arrow icon.
These subitems should also be dropTargets, but they are not by default.In jquery there is the “on”-Handler which also works for dynamically created/added elements. Is there something like this in jqxDragDrop too?
Or is it necessary to re-initialize the whole jqxDragDrop elements after adding new drop targets dynamically?
Regards
Stephan
Hello Stephan,
If you have set allowDrag and allowDrop properties to true, even the dynamically-loaded items will be drop targets. Here is an example, based on the demos Drag and Drop and Load on Demand with Ajax. Note that you will need the demo files ajaxroot.htm, ajax1.htm and ajax2.htm, too, to run the example properly.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../scripts/demos.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/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxTree var tree = $('#jqxTree'); var source = null; $.ajax({ async: false, url: "ajaxroot.htm", success: function (data, status, xhr) { source = jQuery.parseJSON(data); } }); tree.jqxTree({ source: source, height: 300, width: 220, allowDrag: true, allowDrop: true }); tree.on('expand', function (event) { var label = tree.jqxTree('getItem', event.args.element).label; var $element = $(event.args.element); var loader = false; var loaderItem = null; var children = $element.find('ul:first').children(); $.each(children, function () { var item = tree.jqxTree('getItem', this); if (item && item.label == 'Loading...') { loaderItem = item; loader = true; return false }; }); if (loader) { $.ajax({ url: loaderItem.value, success: function (data, status, xhr) { var items = jQuery.parseJSON(data); tree.jqxTree('addTo', items, $element[0]); tree.jqxTree('removeItem', loaderItem.element); } }); } }); $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px' }); }); </script> </head> <body class='default'> <div id="jqxTree" style='float: left;'> </div> <div id='treeA' style='float: left; margin-left: 10px;'> <ul> <li id='home' item-selected='true'>Home</li> <li item-expanded='true'>Solutions <ul> <li>Education</li> </ul> </li> <li>Financial services</li> <li>Community</li> </ul> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.