Question

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

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

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

Answer 1

好的，这是一种方法。基本上，这个想法是在拖拽拖拽它后将读取掉落的偏移量，宽度和高度。当拖动一个元素而另一个元素悬停时，使用鼠标位置，偏移量和元素的尺寸计算重叠（从鼠标位置减去偏移量并与可放置的尺寸进行比较）： / p>

$(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;
    }

  });

});

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

1 个答案: