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

你可以设置＆＃34;删除＆＃34;的opacity项目到0以模拟隐藏。

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

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

<强> JQuery的：

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

<强> CSS：

.hidden {
  opacity: 0;
}

<强> Fiddle Example

jQuery可拖动的位置不变

1 个答案: