jQWidgets Forums

Tagged: allowDrag, allowDrop, drag, drop, dynamic, jqxdragdrop, jqxtree, target, Tree

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.

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

Author

jqxDragDrop – Update drop Targets dynamically Posts

April 1, 2014 at 12:33 pm jqxDragDrop – Update drop Targets dynamically #52333

hopper

Participant

Hi,

what is the best way, to keep the dropTarget’s always up to date?
I want to drag in a jqxTree, which is not fully loaded, but load subitems by clicking the arrow icon.
These subitems should also be dropTargets, but they are not by default.

In jquery there is the “on”-Handler which also works for dynamically created/added elements. Is there something like this in jqxDragDrop too?

Or is it necessary to re-initialize the whole jqxDragDrop elements after adding new drop targets dynamically?

Regards

Stephan

April 2, 2014 at 6:10 am jqxDragDrop – Update drop Targets dynamically #52382

Dimitar

Participant

Hello Stephan,

If you have set allowDrag and allowDrop properties to true, even the dynamically-loaded items will be drop targets. Here is an example, based on the demos Drag and Drop and Load on Demand with Ajax. Note that you will need the demo files ajaxroot.htm, ajax1.htm and ajax2.htm, too, to run the example properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            var tree = $('#jqxTree');
            var source = null;
            $.ajax({
                async: false,
                url: "ajaxroot.htm",
                success: function (data, status, xhr) {
                    source = jQuery.parseJSON(data);
                }
            });

            tree.jqxTree({ source: source, height: 300, width: 220, allowDrag: true, allowDrop: true });
            tree.on('expand', function (event) {
                var label = tree.jqxTree('getItem', event.args.element).label;
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                var children = $element.find('ul:first').children();
                $.each(children, function () {
                    var item = tree.jqxTree('getItem', this);
                    if (item && item.label == 'Loading...') {
                        loaderItem = item;
                        loader = true;
                        return false
                    };
                });
                if (loader) {
                    $.ajax({
                        url: loaderItem.value,
                        success: function (data, status, xhr) {
                            var items = jQuery.parseJSON(data);
                            tree.jqxTree('addTo', items, $element[0]);
                            tree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }
            });

            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px' });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxTree" style='float: left;'>
    </div>
    <div id='treeA' style='float: left; margin-left: 10px;'>
        <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>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.