如何在 jQuery UI 中获取与可拖放对象重叠的可拖动对象的百分比/位置？

Question

我正在使用 jQuery UI 使一些元素可拖放。就像一个可排序的，我试图在拖放时将拖动的元素左/右/上/下排列到悬停的元素。另外，我想在悬停另一个元素时显示一个指示器， 元素将被放置到的位置，当它被放置时。

行为应该是，如果光标悬停在元素的左三分之一处，则元素将被悬停在悬停元素的左侧。如果光标位于悬停元素的右三分之一上方，则应将其放在悬停元素的右侧。在 script.aculo.us 中，有一个名为 'overlap' 的参数，它以悬停元素的百分比表示鼠标重叠。

在 jQuery UI 中是否有类似的东西，或者如何做到这一点？

Answer 1

好的，这是执行此操作的一种方法。基本上，这个想法是在一个可拖动对象被拖到它上面时读取一个可放置对象的偏移量、宽度和高度。当一个元素被拖动而另一个元素悬停时，重叠是使用鼠标位置、偏移量和元素的尺寸计算的（从鼠标位置中减去偏移量并与可放置的尺寸进行比较）：

$(function() {

    var offx, offy, w, h,
        isOverEl = false;

    $( ".component" ).draggable({
       drag: function(event, ui) {

         if(!isOverEl) return;

         console.log(
           ((event.pageY-offy)/h)*100, // returns vertical overlap in %
           ((event.pageX-offx)/w)*100  //returns horizontal overlap in %
         )

       }
    });

    $( ".component" ).droppable({

    over: function(event, ui) {

      var $this  = $(this),
          offset = $this.offset();

      offx = offset.left;
      offy = offset.top;

      w = $this.outerWidth();
      h = $this.outerHeight();

      isOverEl = true;

    },

    out: function(event, ui) {
      isOverEl = false;
    }

  });

});