jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable drag and drop item and can return items to original position

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 3 years, 8 months ago.

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

  • amirsamanipoor
    Participant

    hi
    i have a form with two div and i need our users can drag and drop from one div named “dragme” to another div named “dropable” but it has some points :
    1- user can only drop item to “dropable” div.
    2- user can return dragged items which is in “dropable” div to original position named “dragableContainer”
    please help me to solve my problem
    my current code :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jqwidget/jqxcore.js"></script>
        <script type="text/javascript" src="js/jqwidget/jqxdragdrop.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".dragme").jqxDragDrop({
                    revert: true,
                    dropTarget: $("#dropable")
                });
                $('.dragme').bind('dropTargetEnter', function (event) {
                    console.log("onDropTargetEnter:" + $(this).jqxDragDrop('revert'));
                    $(this).jqxDragDrop({ revert: false });
                });
                $('.dragme').bind('dropTargetLeave', function (event) {
                    console.log("onDropTargetLeave:" + $(this).jqxDragDrop('revert'));
                    $(this).jqxDragDrop({ revert: true });
                });
            });
        </script>
        <style type="text/css">
            .dragme {
                margin-left: 3px;
                margin-top: 20px;
                font-size: 10px;
                font-family: Verdana;
                display:inline-block;
            }
            #dropable {
                background-color: blue;
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
            <div id="dragableContainer" style="background-color: yellow; width: 200px; height: 200px;">
                <div class="dragme">Drag me1</div>
                <div class="dragme">Drag me2</div>
                <div class="dragme">Drag me3</div>
                <div class="dragme">Drag me4</div>
                <div class="dragme">Drag me5</div>
                <div class="dragme">Drag me6</div>
            </div>
            <div id="dropable"></div>
    </body>
    </html>

    Hristo
    Participant

    Hello amirsamanipoor,

    Change the set option revert: false when fire ‘dropTargetLeave’ event and try to create some custom logic to organize elements in the “dragableContainer”.
    Also could use dragStart event to (ex.: $(this).offset()) to collect a concrete positions ({id, top, left}) of each item.
    I would like to suggest you to two other widget and they demos:
    jqxTreeGrid
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/dragdrop.htm?light
    jqxSortable
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsortable/connected-lists.htm?light

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    amirsamanipoor
    Participant

    thank’s Hristo
    but i dont understand what did you mean?
    please give me a sample code
    and i have another question that how can i get the element that drag item drop on it?(dropped element)


    Hristo
    Participant

    Hello amirsamanipoor,

    Please, take a look this example:
    https://www.jseditor.io/?key=example-dragdrop

    Also I would like to recommend you as in previous post – jqxSortable

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.