drag and drop item and can return items to original position - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular dragdrop, bootstrap dragdrop, javascript dragdrop, jquery dragdrop, jqwidgets dragdrop, jqxdragdrop

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

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

Author

drag and drop item and can return items to original position Posts
July 10, 2016 at 7:06 am drag and drop item and can return items to original position #85629
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>
```
July 11, 2016 at 6:36 am drag and drop item and can return items to original position #85636

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

July 11, 2016 at 12:21 pm drag and drop item and can return items to original position #85645

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)

July 12, 2016 at 7:52 am drag and drop item and can return items to original position #85668

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
Author

Posts

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

You must be logged in to reply to this topic.