When a dragged element touches other element / leave other element

Question

I have a element (#dot) which can be dragged. The dragged element (#dot) is just allowed to be in multiple (.way)s but when (#dot) leaves this element then a function should start (for now a alert is enough). I have search on stackoverflow and on other pages but I dont find out somethings like this.

Fiddle

Here is my JS:

$(document).ready(function (){
  $('#dot').draggable({
    containment: "#world",
  });
});

Html:

<div id="world">
    <div id="dot"></div>
    <div class="way">
    </div>
</div>

For now an alert is enough...

My question is, how can i check if the element touches on other element?

What have you tried so far? have you researched any material about collision detection? And BTW - why don't you use the HTML5 `Canvas`? — Kamil T, Jun 05 '14 at 11:51
I want about this function but the function starts when i hover the `id="world"`. — , Jun 05 '14 at 11:54
[Here's](http://stackoverflow.com/questions/2440377/javascript-collision-detection) a dup? — Teemu, Jun 05 '14 at 11:55
You can use `containment: ".way"`, then you will only be able to drag the dot in the 'white' area, but it still won't detect actual collisions. — Kamil T, Jun 05 '14 at 11:56
what do you mean by "when the first Element touches the place"? when dragged item is hovered over, or dropped onto..? — T J, Jun 05 '14 at 12:02
@TJ I want say when the droped elemtent `#dot` touches `#world` — , Jun 05 '14 at 12:03
@KamilT i know but there should be a alert function when the `#dot` leaves the white area — , Jun 05 '14 at 12:10

K K · Answer 1 · 2014-06-12T10:29:03.333

3

Updated answer:

Demo: http://jsbin.com/yorohimi/4

Seems like you can use jQuery draggable and droppable for this:

JS:

$(document).ready(function () {  
  $('#dot').draggable();
  $('.way').droppable({
    accept:'#dot',
    tolerance:'fit',        
    over:function(event,ui){
      $('p').text('moved inside way');
      $('#world').removeClass('green');
    },
    out:function(event,ui){
      $('p').text('moved outside way');
      $('#world').addClass('green');
    }
  });  
});

The key is to use tolerance:fit here in droppable. Whenever #dot touches #world the color of #world is changed for visual feedback.

Following method will work only for single .way. You can compare the position using getBoundingClientRect method and execute your code.

Fiddle: http://jsfiddle.net/9SJam/4/

JS:

$(document).ready(function () {
    $('#dot').draggable({
        axis: "y",
        containment: "#world",
        drag: function (event, ui) {
            drag_handler($(ui.helper));
        }
    });
});

function drag_handler(elem) {
    var p = elem[0].getBoundingClientRect();
    var P = $('.way')[0].getBoundingClientRect();
    if ((P.top > p.top) || (P.bottom < p.bottom)) {
        console.log('touched');
        $('#world').addClass('color');//For visual feedback
    } else {
        $('#world').removeClass('color'); //For visual feedback
    }
}

edited Jun 12 '14 at 10:29

answered Jun 05 '14 at 12:31

K K

17,794
4
30
39

In case you are looking for x axis also, you can also compare right,left position. – K K Jun 05 '14 at 12:44
1

no i wont, i've already hear something like that but your solution is far better – Jun 05 '14 at 12:50
I've a question: Whats when i have more then one `.way`? http://jsfiddle.net/9SJam/8/ and when i leave the `.way` on the right side then the function dont start – Jun 05 '14 at 16:24
That's what I said in earlier comment. If you need to check on x axis also, then you will have to compare the right and left position too just like bottom and top positions are compared in the code. In case of multiple .way, just loop through all .way – K K Jun 05 '14 at 17:10
oh, my false I misunderstood you before. So what I have to do. This doesnt work jsfiddle.net/9SJam/11 – Jun 06 '14 at 12:51
You can further take help from this answer:http://stackoverflow.com/questions/19661108/detect-element-if-over-another-element-via-using-css3-transform I believe this is what you may need further – K K Jun 06 '14 at 12:57
do you see my fiddle file? – Jun 06 '14 at 12:58
Yes I did. In short you want to detect when your element is over a specific element. The link which I mentioned does exactly that. Just give a try – K K Jun 06 '14 at 12:59
I did not quite understand what I need to do exactly. And how can it several `.way` use? – Jun 06 '14 at 13:24
So i've find out to set the right and left side, so i have even tried to use a loop for multiple classes but this wont work... – Jun 11 '14 at 14:30

score 1 · Answer 2 · answered Jun 05 '14 at 11:57

You need to declare #world as droppable, then you can use it's over event to trigger your function, which is triggered when an accepted draggable is dragged over the droppable.

something like

$( "#world" ).droppable({
 over: function() {
      // Your logic
      }
});

When a dragged element touches other element / leave other element

2 Answers2