Rolling back a drag operation - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Rolling back a drag operation Posts

September 11, 2012 at 5:08 pm Rolling back a drag operation #7695

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.

September 12, 2012 at 5:21 am 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/

September 12, 2012 at 6:06 pm 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.

September 13, 2012 at 5:17 am 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/

September 13, 2012 at 6:23 pm 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?

September 13, 2012 at 8:54 pm 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

September 17, 2012 at 12:57 pm 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.

September 17, 2012 at 12:59 pm 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

September 17, 2012 at 4:54 pm Rolling back a drag operation #8065

psteele

Member

Peter,

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

Author

Posts

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

You must be logged in to reply to this topic.