CODEWITHSUNDEEP
javascriptjqueryhtmldraggable
user2628521
user2628521

Reputation:

When a dragged element touches other element / leave other element

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?

Upvotes: 2

Views: 718

Answers (2)

K K
K K

Reputation: 18099

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
    }
}

Upvotes: 3

T J
T J

Reputation: 43156

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
      }
});

Upvotes: 1

Related Questions