jQWidgets Forums

Tagged: javascript tree, jquery tree, jqwidgets tree, jqxtree

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 3 months ago.

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

Author

Tree drag and drop Posts

January 23, 2014 at 5:29 pm Tree drag and drop #48301

Participant

I am implementing a tree with a drag and drop feature. My questions are:

1.) Can you prevent the firing of the ‘select’ event when you start dragging?
2.) When you drag an item and hover the dragged item into nodes where you want to drop them, a broken line is displayed under the nodes, is there a way to change that to a different style to be more explict? Because right now its a little confusing on where you are hovering.

Thanks in advance!

gooose

January 24, 2014 at 6:27 am Tree drag and drop #48309

Peter Stoev

Keymaster

Hi goooose,

1. It won’t be possible because starting a drag makes a selection in the Tree, too.
2. The Drop Indicator of the Tree is displayed below or above the item to indicate where the Drop item would go.

Example for styling the Drop Line:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
        can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
    </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="../../scripts/demos.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>
    <style>
        .jqx-listbox-feedback {
            border: 1px solid lime;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', 
                dragStart: function (item) {
                    if (item.label == "Community")
                        return false;
                }
            });
            $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', 
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (item.label == "Forum")
                        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;
                    }
                    var offset = $("#textarea").offset();
                    var width = $("#textarea").width();
                    var height = $("#textarea").height();
                    var right = parseInt(offset.left) + width;
                    var bottom = parseInt(offset.top) + height;

                    if (x >= parseInt(offset.left) && x <= right) {
                        if (y >= parseInt(offset.top) && y <= bottom) {
                            $("#textarea").val(event.args.label);
                        }
                    }
                }
            });
        });
    </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 style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </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>
                <br />
                <b>Note:</b>
                <br />
                Dragging of "Community" is disabled.
                <br />
                Dropping of "Forum" is disabled.
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 31, 2014 at 5:16 pm Tree drag and drop #48740

goooseman

Participant

Thanks for the heads up peter.

Another question though, when dropping an item, the dragEnd callback function has the dropPosition parameter, and I noticed that its values are always before, after and inside. Is there any way to disable before and after? Because if you drag an item and hover it on the the nodes, there’s an empty display before and after a node. I just want to give the inside option to users to make sure that the dragged item will be dropped inside a node.

February 4, 2014 at 8:19 am Tree drag and drop #48914

Peter Stoev

Keymaster

Hi goooseman,

It is currently not possible to disabled these options. We will consider that missing functionality for a future version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.