jQuery UI Widgets Forums Navigation Tree Drag and drop problem

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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 ?

    • This topic was modified 7 years, 8 months ago by  ashensugar.
    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/

    Drag and drop problem #30360

    ashensugar
    Participant

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

    Drag and drop problem #59619

    srivaishnavi
    Participant

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

    Drag and drop problem #59621

    Dimitar
    Participant
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.