Draggable: Basic question: How to identify when draggable element is over a particular DOM element?

[giekaton]

Like drag:over and drag:out, but for a DOM element with a particular ID.

[giekaton]

I have come up with this complex workaround. I think there should be a more simple solution, but coudn't find anything in docs or google.

First I define two different divs both with "draggable" class. First one is the draggable element, the second one is drag over target. I set "display:none;" by default for the second one, so that it is not selectable or draggable when the user loads the page.

<div class="draggable"><img src="img/food-off.png" title="Food" id="n-food-off" width="40" ></div>

<div class="draggable" id="real-over" style="display:none;position:absolute;width:200px;height:200px;"></div>

<script>
var el = document.querySelectorAll('div.draggable');
var draggable = new window.Draggable.Draggable(el, {
    draggable: 'div',
});
</script>

Then on drag start I show the hidden div. When the draggable is over it, I get its ID and if it's a correct one, I switch "over" variable to true. And then use this variable to identify if the draggable ended over that particular element or not.

<script>
draggable.on('drag:start', () => {  jQuery("#real-over").show(); });
draggable.on('drag:over', () => { 
    object_over = draggable.currentOver;
    if (object_over.id == "real-over") {
    over = true;
    }
});
draggable.on('drag:stop', () => { 
    jQuery("#real-over").hide();
    if (over) {
        jQuery("#n-image").attr("src","img/n-blink.gif");
        var audio = new Audio('fx/fed.wav');
        audio.play();             
        over = false;
    } 
});
draggable.on('drag:out', () => { 
    over = false;
});
</script>

[beefchimi]

Hey @dziungles

So is the issue here that you want to know when your current draggable mirror is over top _some arbitrary element_ that is not a another draggable "item" (source) or container or dropzone?

If that is true, then I would probably just listen for a mouseover event on these "non-draggable" items you are concerned with, and execute some logic while you are dragging _(you could toggle a boolean variable on drag start/end that enables/disables listening for this mouseover)_.

When it comes to all items being a draggable source or container or dropzone... there are a few examples of this _type_ of behaviour available within the examples folder of this directory. For instance:

https://shopify.github.io/draggable/examples/unique-dropzone.html

In this Droppable example, we are looking for a particular data-attr value that lets us restrict where an element can be dropped.

Another useful example might be the 3 capacity limit:

https://shopify.github.io/draggable/examples/multiple-containers.html

All source code for those examples is available in this repo. Please take a look and let us know if you still have questions.

Cheers!

[giekaton]

I was thinking about using 'mouseover', but the problem is that mouseover listener doesn't get the dragging event on mobile.

I think that this "Draggable over the dom element" feature is a very common need, strange that it is not available. For example, in another project I have a draggable element, and then I have a DOM CSS grid. I need to be able to know which grid square the draggable element is over.

[tsov]

Hmm, I may be confused here, but you just want to know when you are over a particular _draggable_ DOM element? drag:over only fires when you are dragging over another draggable element, if you want to find out if you are over a none draggable element (across devices, e.g. including touch), you can use the drag:move event and inspect .on(dragMoveEvent => dragMoveEvent.sensorEvent.target), which tells you which element you are over.

Let me know if that helps, or if I misunderstood something

[beefchimi]

Yes @dziungles what @tsov suggests should be exactly what you need. I was making the solution more complicated than it needed to be.

[giekaton]

Yes, I think this should work. I will check soon and let you know.

[giekaton]

Yes, it works great. Thank you for the solution.

Just in tsov's first sentence it should be written: ...over a particular _nondragabble_ DOM element.

Anyway, thanks for a great library. Even though it is quite difficult to understand, the possibilities are amazing. I'm going to continue learning and experimenting with it.