Question

我有一个有两列的表;名称和项目（由图像表示）。

<table>
  <tr>
    <td class='name'>bob</td> <td class='items'><img src='thing1.gif' class='item'></td>
  </tr>
  <tr>
    <td class='name'>joe</td> <td class='items'><img src='thing2.gif' class='item'></td>
  </tr>
</table>

我希望用户能够将图像从一行拖到另一行（即，将“thing2.gif”从joe移动到bob）。我用jQuery完成了这个，如下所示：

// initialize these as draggable
$(".item").draggable({
    revert: "invalid",
    ghosting: true,
    opacity: 0.5,
});

$(".items").droppable({
    accept: ".item",
    activeClass: "drop_active",
    drop: function( event, ui ) {
        $(this).append(ui.draggable);
    }
});

我遇到的问题是，移动后，每个img似乎都获得了一个新的css属性：top: ±X;，其中X表示图像垂直移动的程度。即，如果我在放下图像之前将图像向上拖动像素，它将具有属性top: -40px。这将使其显示在它的新行上方40个像素的效果。有谁知道如何纠正这个？或者，任何人都可以提出更好的方法吗？

Answer 1

只需删除放置处理程序中的top属性。

 $(this).append($(ui.draggable).css('top',''));

Answer 2

对于那些来自谷歌的人...你也可以添加：

.ui-draggable-dragging{
    top:0 !important;
}

jQuery draggable改变css“top”值

2 个答案: