javascript - 当拖动的元素接触其他元素/离开其他元素时

Question

我有一个可以拖动的元素(#dot)。被拖动的元素 (#dot) 只允许出现在多个 (.way) 中，但是当 (#dot) 离开该元素时一个函数应该启动(现在一个警报就足够了)。我在 stackoverflow 和其他页面上进行了搜索，但没有找到类似的内容。

<强> Fiddle

这是我的 JS:

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

HTML:

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

现在警报就足够了......

我的问题是，如何检查该元素是否接触到其他元素？

Answer 1

更新的答案:

演示: http://jsbin.com/yorohimi/4

似乎您可以使用 jQuery Draggable 和 Droppable 来实现此目的:

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

关键是在 droppable 中使用 tolerance:fit 。每当#dot触摸#world时，#world的颜色就会改变以提供视觉反馈。

以下方法仅适用于单个.way。 您可以使用 getBoundingClientRect 方法比较位置并执行代码。

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