j查询可拖动位置不变

jQuery draggable position unchanged

本文关键字：位置 拖动 查询      更新时间：2023-09-26

我有四个相邻的可拖动对象，我希望它能够从列表中删除可拖动对象，其余的将保留在原位。

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

j查询：

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

您可以将"已删除"项的opacity设置为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;
}

小提琴示例

相关文章：