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 6 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Getting a Tree drag and drop to work #115045

    Alastair Walker
    Participant

    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,
    Alastair


    Hristo
    Participant

    Hello Alastair,

    You need to include the jqxdragdrop.js file.
    Please, take a look at this demo.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    Alastair Walker
    Participant

    Oh my!

    Thank you so much for spotting the problem!

    Much appreciated!

    Alastair

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

You must be logged in to reply to this topic.