JQuery: добавление точки привязки в объект с перетаскиванием

Question

Я хочу добавить пользовательские точки на объект dragee. По умолчанию будет только привязана граница объекта драже. Я хочу добавить пользовательскую точку в середине объекта для привязки.

Например, если объект в квадрате с шириной 2 и высотой 2, то средняя точка 1,1 и будет прилипать к объектам (например, «.snapper») объявлены в:

$(object).draggable({ snap: ".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; 
    } 
}