jquery可以在几个div上拖动

Question

照片：

<div id="grid-wrapper">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>

当我放下我的跨度时，我想更改两个div上的类，并删除draggable。

我有这个：

$( ".dragandrop" ).draggable({ snap: "#grid" });

    $("#grid").droppable({
          drop: function( event, ui ) {
            $( this )
              .addClass( "droped" )
          }
        });

此代码仅在第一个div上添加.droppable，并且不添加类＆＃34; droped＆＃34;，我无法删除.draggable。你能救我吗？

Answer 1

首先，请注意对多个元素使用相同的ID。它可能会导致非常奇怪的问题（请参阅此post）。

其次，请确保将 draganddrop 类添加到您想要的相应元素中，然后拖放。

你想删掉一个元素上的draggable吗？我想你想要的东西看起来像这样：

＆＃13;

＆＃13;

$( ".dragandrop" ).draggable({ 
    snap: ".dragandrop" ,
    stop: function(event, ui){
        $( this ).addClass( "droped" );
        $( this ).draggable( 'disable' );
    }
});

$(".dragandrop").droppable({});

＆＃13;

div{
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="grid-wrapper">
   <div id="grid1" style="background:orange;" class="dragandrop">a</div>
   <div id="grid2" style="background:red;" class="dragandrop">b</div>
   <div id="grid3" style="background:green;" class="dragandrop">c</div>
   <div id="grid4" style="background:yellow;" class="dragandrop">d</div>
</div>

＆＃13;

＆＃13;

＆＃13;

您可能还想添加一些逻辑以使活动div保持最佳状态。