jQWidgets Forums

jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable jqxDragDrop – Update drop Targets dynamically

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

  • 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


    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/

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

You must be logged in to reply to this topic.