Jquery：ドラッグ可能なオブジェクトにスナップポイントを追加する

Question

私が欲しいのは、drageeオブジェクトにカスタムポイントを追加することです。デフォルトでは、drageeオブジェクトの境界線がスナップされます。私が望むのは、スナップするオブジェクトの中央にカスタムポイントを追加することです。

$(object).draggable({ snap: ".snapper"});

：例えば

オブジェクトが幅2及び高さ2と二乗された場合、中間点は1,1であり、オブジェクトにスナップします（例えば、「は.snapper」）で宣言され

これは、現在、私の仕事です：

function MiddlePointSnapping(ui, inst) { 
    var dragee = ui.helper[0]; var pos = $(dragee).position(); var mx = pos.left + Math.ceil($(dragee).width()/2); var my = pos.top + Math.ceil($(dragee).height()/2); 
    var closestX = null; var closestY = null; var dx = null; var dy = null; 
    $(dragee).closest('.grid-stack').find(".drag-reference").each(function (i, el) { 
     if (i == 0) { 
      dx = Math.abs(mx - $(el).position().left); closestX = $(el).position().left; 
      dy = Math.abs(my - $(el).position().top); closestY = $(el).position().top; 
     } 
     else { 
      if (dx > Math.abs(mx - $(el).position().left)) { 
       dx = Math.abs(mx - $(el).position().left); closestX = $(el).position().left; 
      } 
      if (dy > Math.abs(my - $(el).position().top)) { 
       dy = Math.abs(my - $(el).position().top); closestY = $(el).position().top; 
      } 
     } 
    }); 
    if (dx < _snapTolerance) { 
     ui.position.left = closestX - Math.ceil($(dragee).width()/2); 
    } 
    if (dy < _snapTolerance) { 
     ui.position.top = closestY - Math.ceil($(dragee).height()/2); 
    } 
} 

私はdrag:からこの関数を呼び出します。

ui.position.left = closestX - Math.ceil($(dragee).width()/2); 
ui.position.top = closestY - Math.ceil($(dragee).height()/2); 

それがスナップしたら、それは最寄りの鯛にスナップし続けるので、私はもう、オブジェクトを移動することはできません：私は割り当てるときこれで問題があります。コードはui.position.left and topを割り当て続けているので、オブジェクトを移動することはできません。

どうすればこの問題を解決できますか？

Answer 1

これは、私はそれをやった方法です：

function MiddlePointSnapping(ui) { 
    var dragee = ui.helper[0]; 
    var pos = ui.position; 
    var mx = pos.left + Math.ceil($(dragee).width()/2); 
    var my = pos.top + Math.ceil($(dragee).height()/2); 
    var dx = null; 
    var dy = null; 
    var realdx = null; 
    var realdy = null; 
    $(dragee).closest('.grid-stack').find(".drag-reference").each(function (i, el) { 
     if (i == 0) { 
      realdx = mx - $(el).position().left; dx = Math.abs(realdx); 
      realdy = my - $(el).position().top; dy = Math.abs(realdy); 
     } 
     else { 
      if (dx > Math.abs(mx - $(el).position().left)) { 
       realdx = mx - $(el).position().left; dx = Math.abs(realdx); 
      } 
      if (dy > Math.abs(my - $(el).position().top)) { 
       realdy = my - $(el).position().top; dy = Math.abs(realdy); 
      } 
     } 
    }); 
    if (dx < _snapTolerance) { 
     ui.position.left -= realdx; 
    } 
    if (dy < _snapTolerance) { 
     ui.position.top -= realdy; 
    } 
}