Question

我有一个可以拖动的元素（#dot）。被拖动的元素（#dot）只允许在多个（.way）s中，但当（#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方法比较位置并执行代码。

小提琴：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
    }
}

Answer 2

您需要将#world声明为droppable，然后您可以使用它的over事件来触发您的函数，该函数会在将可接受的拖动拖过拖放时触发。

类似

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

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

2 个答案: