Multiple drags onto multiple drops - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: drag, Drag & Drop, drop, DropTarget, multiple, onTargetDrop, target

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

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

Author

Multiple drags onto multiple drops Posts
February 5, 2014 at 10:10 am Multiple drags onto multiple drops #49001

shuttlefish
Participant

Hi,
I have a problem that I cannot solve.

I have some code that displays a grid of images. I need to be able to drag ANY of the images onto ANY of the other images so that they become a group. When the drop is initiated a pop up form will appear that asks the user to name the group.

I have having trouble understanding how to do this, since it doesn’t seem to work if the target is the same identifier as the drop. Any help would be appreciated!

i.e. this doesn’t work:

$(‘.drop-target’).jqxDragDrop({
restricter: ‘parent’,
revert: true,
dropTarget: ‘.drop-target’,
tolerance: ‘intersect’,
onDragStart: function(data) {

},
onTargetDrop: function(data) {
var id = $(data).attr(‘id’);
alert(“Target: ” + id);
$(“#” + id).removeClass(“overObject”);
},
onDropTargetEnter: function(data) {
var id = $(data).attr(‘id’);
$(“#” + id).addClass(“overObject”);
/* alert(“Target: ” + feedback); */

},
onDropTargetLeave: function(data) {
var id = $(data).attr(‘id’);
$(“#” + id).removeClass(“overObject”);
/* alert(“Target: ” + feedback); */
}
});

February 6, 2014 at 9:46 am Multiple drags onto multiple drops #49077
Dimitar
Participant
Hello shuttlefish,

Having the draggable items as drop targets to themselves is not supported, indeed. However, here is something of a workaround, which may be of help to you:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var onTargetDrop = function (target) {
                alert("Dropped over " + target[0].id);
            };

            $("#spiderMan").jqxDragDrop({ dropTarget: $(".images").not("#spiderMan"), onTargetDrop: onTargetDrop });
            $("#starTrek").jqxDragDrop({ dropTarget: $(".images").not("#starTrek"), onTargetDrop: onTargetDrop });
            $("#thor").jqxDragDrop({ dropTarget: $(".images").not("#thor"), onTargetDrop: onTargetDrop });
        });
    </script>
</head>
<body class='default'>
    <img src="../../images/The_Amazng_Spider_Man.jpeg" class="images" id="spiderMan" />
    <img src="../../images/Star_Trek.jpg" class="images" id="starTrek" />
    <img src="../../images/Thor.jpg" class="images" id="thor" />
</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.