jQuery可拖动位置不变

【问题标题】：jQuery draggable position unchangedjQuery可拖动位置不变
【发布时间】：2016-05-25 11:05:38
【问题描述】：

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

<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;
        }
    });

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-dialog

【解决方案1】：

您可以将“已删除”项目的opacity 设置为0 以模拟隐藏。

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

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

JQuery：

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

CSS：

.hidden {
  opacity: 0;
}

Fiddle Example

【讨论】：