jQuery UI Widgets › Forums › Navigation › Tree › Getting a Tree drag and drop to work
This topic contains 2 replies, has 2 voices, and was last updated by Alastair Walker 3 years, 7 months ago.
-
Author
-
I have set up a demo of tree drag and drop based on the Fiddle Drag Start demo (http://jsfiddle.net/jqwidgets/aQNUd/). The Fiddle demo work fine. But I cannot get it to work in a stand alone demo.
My demo code is
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title id='Description'>Drag and Drop an Item</title> <link rel="stylesheet" href="libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/demos.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxtree.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> $(document).ready(function () { $('#jqxTree').jqxTree( { height: '300px', width: '300px', theme: 'energyblue', allowDrag: true, allowDrop: true }); $("#jqxTree").on('dragStart', function (event) { $("#dragStartLog").text("Drag Start: " + event.args.label); }); }); </script> <div style='margin-top: 20px;' id='jqxTree'> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'>Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li>Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> <li>Rich Internet applications</li> <li>Technical communication</li> <li>Training and eLearning</li> <li>Web conferencing</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> </ul> </div> <div id="dragStartLog"></div> <div id="dragEndLog"></div> </body> </html>
The code runs and the tree list is displayed, but the drag and drop actions seem to be inactive.
Is there a step in the code that I am missing?
Any help in this regard will be appreciated!Many thanks,
AlastairHello Alastair,
You need to include the
jqxdragdrop.js
file.
Please, take a look at this demo.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comOh my!
Thank you so much for spotting the problem!
Much appreciated!
Alastair
-
AuthorPosts
You must be logged in to reply to this topic.