jQuery UI Widgets Forums Navigation Tree Rolling back a drag operation

Tagged: , , ,

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Rolling back a drag operation #7695

    psteele
    Member

    I’m using the jqxTree control to allow the user to re-order a tree. There are some nodes I don’t want the user to be able to drop items onto. They ARE allowed to drag any item (so I can’t return false in dragStart), but once they’ve dragged it somewhere, I’d like to check where they dragged it and, if possible, cancel the drag and rollback things to the way they were.

    Is there an easy way to do that? I’ve tried returning false in dragEnd, but the drag still completes.

    Rolling back a drag operation #7735

    Dimitar
    Participant

    Hello psteele,

    Here is a sample, showing how to cancel the drop on undesired items (in this case, the Education item):

    <!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.8.1.min.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxTree
    $('#jqxTree').jqxTree({ height: '300px', width: '300px', allowDrag: true, allowDrop: true,
    dragEnd: function (item, dropItem, args, dropPosition, tree) {
    if (dropItem.label == "Education")
    return false;
    }
    });
    });
    </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/

    Rolling back a drag operation #7834

    psteele
    Member

    Thanks. I’m running 2.3.1 and returning false does not work. What version added support for canceling a drag?

    And is there any documentation on the new parameters in the ‘dragEnd’ event? The online documentation only describes a single ‘event’ parameter.

    Rolling back a drag operation #7852

    Dimitar
    Participant

    Hi psteele,

    Thank you for your feedback. We will update the documentation as soon as possible.

    We recommend using the latest version of jQWidgets (as of today, it is 2.4.2). The example was made with 2.4.1. Also, check out the following demo:

    dragdrop.htm

    Best Regards,
    Dimitar

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

    Rolling back a drag operation #7915

    psteele
    Member

    I downloaded 2.4.2 and it still doesn’t work. Returning false has no effect. Also, none of the undocumented parameters of the dragEnd function handler were defined.

    I just clicked on the link to the demo for drag and drop where dropping onto ‘Forum’ is supposed to be prohibited yet it worked for me (using FireFox 15.0.1).

    Does this mean this is a feature that is planned but not yet implemented?

    Rolling back a drag operation #7924

    Peter Stoev
    Keymaster

    Hi guys,

    I will try to explain our online sample which was referred by Dimitar.

    Dropping of “Forum” is disabled. – this means that when you drop the Forum item, nothing happens.
    Dragging of “Community” is disabled. – this means that users cannot drag the “Community” item.

    Your feedback about the API for the dragEnd is correct. I agree that the information about it should be enhanced and we will do it as soon as possible.

    I prepared for you a sample which demonstrates how to disable the dropping of items in the “Community” item. The dragging of the “Community” item is disabled, too.

    JavaScript

    // Create jqxTree
    $('#treeA').jqxTree({
    allowDrag: true,
    allowDrop: true,
    height: '300px',
    width: '220px',
    dragEnd: function(item, dropItem, args, dropPosition, tree) {
    // if the item is dropped inside the "Community" item, disable the
    // drop operation.
    if (dropPosition == 'inside') {
    if (dropItem.label == "Community") return false;
    }
    },
    dragStart: function(item) {
    // disable dragging of 'Community' item.
    if (item.label == 'Community') {
    return false;
    }
    }
    });​

    HTML

        <div id='treeA' style='float: left; margin-left: 0px;'>
    <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>

    The sample is tested with jQWidgets 2.4.2

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Rolling back a drag operation #8051

    psteele
    Member

    Peter,

    I understand the point of the demo Dimitar referenced. The point of my reply was that it didn’t work. Have you tried actually using the live demo on the website that is supposed to prevent dropping on to the ‘Forum’ item?

    I’ll try your sample code to see if that works.

    Thanks.

    Rolling back a drag operation #8052

    Peter Stoev
    Keymaster

    Hi psteele,

    Please, read my post.

    Dropping of “Forum” is disabled. – this means that when you drop the Forum item, nothing happens. Dropping on the Forum is not disabled, dropping of the Forum item is disabled.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Rolling back a drag operation #8065

    psteele
    Member

    Peter,

    Your demo code works to prevent dropping of nodes onto a particular node. Thanks!

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

You must be logged in to reply to this topic.