jQuery UI Widgets › Forums › Navigation › Tree › Drop destination

Tagged: , , , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  yuanru 9 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Drop destination Posts
  • May 9, 2015 at 5:55 am Drop destination #70870

    yuanru
    Participant

    Hello,

    As I use the drag and drop function in jqxTree, there are two kinds of drop destination.
    1) tree node. put one node into another node.
    2) the space between the two adjacent nodes. There are more than one possibility when the adjacent nodes are not in the same level.

    Is it possible to disable the second kind of drop destination? Because it’s a little difficult to understand the complex operation for computer beginners.

    Thanks!

    May 11, 2015 at 8:25 am Drop destination #70916

    Nadezhda
    Participant

    Hello yuanru,

    In the following example you can find how to disable drop destination between two nodes with ‘dragEnd’ callback function and ‘dropPosition’ argument and it’s value is equal to “after” or “before”. I hope it will be helpful to you.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#treeA').jqxTree({
                allowDrag: true, allowDrop: true, height: '300px', width: '220px'
            });
            $('#treeB').jqxTree({
                allowDrag: true, allowDrop: true, height: '300px', width: '220px',
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (dropPosition == "after" || dropPosition == "before")
                        return false;
                }
            });
            $('#treeA').css('visibility', 'visible');
            $('#treeB').css('visibility', 'visible');

            $("#treeA, #treeB").on('dragStart', function (event) {
                $("#dragStartLog").text("Drag Start: " + event.args.label);
                $("#dragEndLog").text("");
            });

            $("#treeA, #treeB").on('dragEnd', function (event) {
                $("#dragEndLog").text("Drag End");
                if (event.args.label) {
                    var ev = event.args.originalEvent;
                    var x = ev.pageX;
                    var y = ev.pageY;
                    if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
                        var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                        x = touch.pageX;
                        y = touch.pageY;
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='visibility: hidden; 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>
            <div style='visibility: hidden; float: left; margin-left: 20px;' id="treeB">
                <ul>
                    <li>Products
                    </li>
                    <li item-expanded='true'>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                        </ul>
                    </li>
                    <li>Knowledge base</li>
                    <li>Forum</li>
                </ul>
            </div>
        </div>
        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
            <b>Events Log:</b>
            <div id="dragStartLog">
            </div>
            <div id="dragEndLog">
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

    May 13, 2015 at 5:55 am Drop destination #71040

    yuanru
    Participant

    Thanks, Nadezhda. It works!

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

You must be logged in to reply to this topic.