У меня есть модуль, сделать перетаскиваемый элемент, и он должен быть перенесен во второй или третий ящик. Примечание. Элемент не должен быть возвращен после того, как элемент перенесен во второй блок, если пользователь заставляет вернуть его в предыдущий блок, предупреждая, что элемент уже установлен в следующем блоке.
Сценарий: Если пользователь поместил элемент в (Поле заказа 2) Пользователь никогда не должен возвращать его обратно в (Поле заказа 1)
Пример здесь,
Мой HTML-код:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="launchPad">
<div class="card">
apple
</div>
<div class="card">
orange
</div>
<div class="card">
banana
</div>
<div class="card">
car
</div>
<div class="card">
bus
</div>
</div>
</div>
<div class="col-md-3">
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
Order 1 here
</div>
<div class="stackDrop1">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
Order 2 here
</div>
<div class="stackDrop2">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
Order 3 here
</div>
<div class="stackDrop3">
</div>
</div>
</div>
</div>
</div>
</div>
Мой код Jquery:
$(document).ready(function(){
$(".card").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
});
$("#launchPad").draggable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$("#launchPad").append($(ui.draggable));
}
});
$(".stackDrop1").droppable({
tolerance: "intersect",
accept: ".card",
revert: 'invalid',
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
alert('In the kitchen');
}
});
$(".stackDrop2").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
alert('On the road');
}
});
$(".stackDrop3").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
alert('Completed');
}
});
})