javascript - jQuery 可拖动位置不变

Question

我有四个彼此相邻的可拖动对象，我希望这样，一旦从列表中删除可拖动对象，其余的将保留在原处。

<div class="draggables">         
        <div id="d1" class="box">
            first box</div>  
        <div id="d2" class="box">
            second box</div>
        <div id="d3" class="box">
            third box</div>
        <div id="d4" class="box">
forth box</div>
    </div>

CSS

.draggables{
    width: inherit;
    height: 60px;
    margin-left: 20px;
}
.box{
    width: 180px;
    height: 30px;
    float:left;
    margin-left: 20px;
}

jQuery:

$("#d1, #d2, #d3, #d4").draggable({
        revert: function (event, ui) {
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0,                
            };
            return !event;
        }
    });

Answer 1

您可以将“已删除”元素的不透明度设置为0以模拟隐藏。

您可以使用stop 在释放鼠标时触发操作，而不是使用revert 选项。此外，您不需要使用每个单独的 id 调用 draggable。您可以简单地在 .box 上调用它，因为所有 div 都共享该类。

在下面的示例中，我分配了一个 hidden 类，它将所选 div/element 的 opacity 设置为 0。

JQuery:

$(".box").draggable({
  stop: function(event, ui) {
    $(this).addClass('hidden');
  }
});

CSS:

.hidden {
  opacity: 0;
}

<强> Fiddle Example