JQuery перетаскиваемым на несколько дивы

Question

Изображение:

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

Я хочу изменить класс на двух дивы, когда я бросаю свой срок, и удалить перетаскиваемым.

У меня есть это:

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

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

Этот код добавить меня .droppable только на первый DIV, и не добавляет класс «падает на порядок», я не могу сделать удаление .draggable. Вы можете мне помочь?

Answer 1

Прежде всего, будьте осторожны, используя один и тот же идентификатор для нескольких элементов. Это может вызвать очень странные проблемы (см. Это post).

Во-вторых, обязательно добавьте класс draganddrop к соответствующим элементам, которые вы хотите, а также перетащите.

И вы хотите удалить перетаскиваемый элемент, как только вы его уронили? Я думаю, что вы хотите выглядеть примерно так:

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

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

div{ 
 
    padding: 20px; 
 
}

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

Вы также можете добавить в некоторых логиках, чтобы сохранить активный DIV на вершине.