1

jQuery UI を使用して、いくつかの要素をドラッグおよびドロップ可能にしています。ソート可能のように、ドラッグされた要素がドロップされたときに、ホバーされた要素に左/右/上/下に配置しようとしています。また、ドロップされたときに、要素が配置される別の要素をホバリングするときにインジケーターを表示したいと考えています。

動作は、カーソルが要素の左 3 分の 1 にある場合、要素はホバーされた要素の左にドロップされます。カーソルがホバーされた要素の右 3 分の 1 の上にある場合は、ホバーされた要素の右にドロップする必要があります。script.aculo.us には、ホバーされた要素のマウスオーバーラップをパーセントで示す「overlap」というパラメーターがあります。

jQuery UIに似たようなものはありますか、それともどうすればできますか?

4

1 に答える 1

1

わかりました、これを行う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;
    }

  });

});
于 2012-07-06T09:54:26.407 に答える