jQuery UI Widgets › Forums › Navigation › Tree › Drag and drop problem

Tagged: , , , , , , , ,

This topic contains 4 replies, has 3 voices, and was last updated by  Dimitar 10 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Drag and drop problem Posts
  • October 4, 2013 at 1:55 pm Drag and drop problem #30235

    ashensugar
    Participant

    Hi everyone,

    I’m using a jqTree in JSON to organise training periods.

    I have potentially 4 levels of depth in my tree, and i’m using drag&drop to organize it.

    Everything works fine, but i’m unable to find the NEW POSITION of the item dragged & dropped.

    $('#jqxTree').jqxTree({
    					allowDrag: true, 
    					allowDrop: true, 
    					dragStart: function (item) {
    						
                    	},
    					dragEnd: function (item) {
                    	},

    the item in dragEnd: function is at his dragged state (for every prop).

    I tried to list props of the item to see if any was containing info on where the item is dropped, no match.

    How can i know where the item is dropped (to then launch my php script saving changes)

    Thanks for reading.
    Hope I’ll get some help on this, pulling my hair since 3 hours ><

    I also want to be able to prevent drag from a different level, is there any way to do that ?

    October 4, 2013 at 2:46 pm Drag and drop problem #30241

    Dimitar
    Participant

    Hello ashensugar,

    The dropItem argument of the dragEnd callback function contains information about the drop target.

    And here is an example that shows how to disable dragging of items with level other than 0 and alert the dropItem’s label:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jQuery Tree Sample</title>
        <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="../../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/jqxdragdrop.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxTree
                $('#jqxTree').jqxTree({ height: '300px', width: '300px', allowDrag: true, allowDrop: true,
                    dragStart: function (item) {
                        if (item.level > 0) {
                            return false;
                        };
                    },
                    dragEnd: function (dragItem, dropItem, args, dropPosition, tree) {
                        alert("Dropped over " + dropItem.label + ".");
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div 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>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    October 7, 2013 at 2:10 pm Drag and drop problem #30360

    ashensugar
    Participant

    Exactly what I was looking for, thanks a lot Dimitar. Have a nice day !

    September 17, 2014 at 8:53 am Drag and drop problem #59619

    srivaishnavi
    Participant

    I have some external Divs. How do i find that in which div the item is dropped?

    September 17, 2014 at 9:28 am Drag and drop problem #59621

    Dimitar
    Participant

    Duplicate post: http://www.jqwidgets.com/community/topic/jqxtree-handle-drop-event/.

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

You must be logged in to reply to this topic.