3

jquery uiドロップ可能は、オーバーレイされたdivによってどのようにブロックできますか？

この例を参照してください：http：//jsfiddle.net/JSFU4/3/。赤いdivがドロップ可能な領域に重なっています。ただし、この領域の上をドラッグしても、ドロップ可能オブジェクトはアクティブのままです。どうすればこれを回避できますか？

HTML

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

CSS

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

JS

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

1 に答える 1

0

これを達成するためにすぐに使えるものはないと思います。ある種の衝突検出を行い、それに応じてロジックを実行する必要があります。私はあなたのために POC を行いました。

デモ

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

上記のコードは、2 つの DIV 間の衝突を検出し、 or を返しtrueますfalse。

于 2013-01-08T17:31:56.507 に答える