Css jQuery UI可按绝对div删除的块

一个jquery ui可拖放文件如何被覆盖的div阻止

请参见此示例：。一个红色的div覆盖在可下降区域上；但是，当在该区域顶部拖动时，可拖放功能仍处于激活状态。如何避免这种情况

Html

JS

---

我不认为有什么现成的东西可以实现这一点。您需要执行某种碰撞检测，然后相应地执行逻辑。我为你做了一个POC

var drag=$（'.drag'）；
var overlay=$（'.overlay'）；
$（函数（）{
$（'.drag'）.draggable（）；
$（'.drop'）。可拖放({
公差：“指针”，
悬停类：'放下悬停'
});
});
var int=self.setInterval（函数（）{
如果（重叠（拖动、重叠））{
$（'.drop'）.css（'visibility'，'hidden'）；
}否则{
$（'.drop'）.css（'visibility'，'visible'）；
}
}, 100);
变量重叠=（函数（）{
函数getPositions（elem）{
变量位置、宽度、高度；
pos=$（elem.position（）；
宽度=$（elem）.width（）/2；
高度=$（elem）.height（）；
返回[[pos.left，pos.left+宽度]，[pos.top，pos.top+高度]]；
}
功能比较位置（p1、p2）{
变量r1，r2；
r1=p1[0]r2[0]| | r1[0]==r2[0]；
}
返回函数（a，b）{
var pos1=获取位置（a），
pos2=getPositions（b）；
返回比较位置（pos1[0]，pos2[0]）&比较位置（pos1[1]，pos2[1]）；
};
})();

上面的代码检测两个div之间的冲突并返回

true

或

false

<div>
  <div class="drop">drop here</div>
</div>
<div>
  <div class="drag">drag me</div>
</div>
<div class="overlay">i want to block the droppable</div>

.drag {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: lightblue;
  z-index: 1;  
}
.drop {
  display: inline-block;
  border: 1px dotted black;
  width: 200px;
  height: 200px;
}
.drop-hover {
  background-color: grey;
}
.overlay {
  position: absolute;
  width: 300px;
  height: 100px;
  top: 50px;
  background-color: red;
  border: 1px solid black;
}

$(function () {
  $('.drag').draggable();
  $('.drop').droppable({
    tolerance: 'pointer',
    hoverClass: 'drop-hover'    
  });
});

var drag = $('.drag');
var overlay = $('.overlay');

$(function () {
  $('.drag').draggable();
  $('.drop').droppable({
    tolerance: 'pointer',
    hoverClass: 'drop-hover'
  });
});


var int = self.setInterval(function () {
  if (overlaps(drag, overlay)) {
    $('.drop').css('visibility', 'hidden');
  } else {
     $('.drop').css('visibility', 'visible');
  }
}, 100);


var overlaps = (function () {
  function getPositions(elem) {
    var pos, width, height;
    pos = $(elem).position();
    width = $(elem).width() / 2;
    height = $(elem).height();
    return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
  }

  function comparePositions(p1, p2) {
    var r1, r2;
    r1 = p1[0] < p2[0] ? p1 : p2;
    r2 = p1[0] < p2[0] ? p2 : p1;
    return r1[1] > r2[0] || r1[0] === r2[0];
  }

  return function (a, b) {
    var pos1 = getPositions(a),
      pos2 = getPositions(b);
    return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
  };
})();