javascript - Jquery可拖动图像拖放到左上角所在的那个div

Question

可放置的 div：

<div id="invContainer" style="width:100px; height:100px;>
  <div id="inv_0-0" class="inventory" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div>
  <div id="inv_1-0" class="inventory" style="position: relative; float:left; width:50px; height:50px; background-color: #000;"></div>
  <div id="inv_0-1" class="inventory" style="position: relative; float:left; width:50px; height:50px; background-color: #000;"></div>
  <div id="inv_1-1" class="inventory" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div>
</div>

我有一些可拖动的图像，如果我把它放到这个容器中，图像就会落在图像中心所在的位置。但我希望它放在图像左上角的位置。有什么解决办法吗？

Answer 1

首先看看JQuery draggable是否有标准的snap-to-position功能。否则，您必须将图像“移动”到您想要的位置。像这样的小数学：

function ondrop_move(obj) {
    w = obj.width();
    h = obj.height();
    new_top = obj.position().top + (h / 2);
    new_left = obj.position().left + (w / 2)
    obj.css('left', new_left);
    obj.css('top', new_top);
}