jQuery draggable: перетаскиваемое перетаскивание только на одном
У меня есть приложение с некоторыми возможностями перетаскивания и перетаскивания, и я хочу сделать для одного типа перетаскивания (с данным классом) это перетаскивание может быть отброшено только для одного типа перетаскивания.
Проблема в том, что это зависит от класса, в начале можно перетаскивать перетаскиваемый элемент в моей сетке:
$('.grid-drop').droppable({
accept: '.block',
hoverClass: 'hovered',
drop: handlePublishBlock
});
Итак, что я делаю, когда начинаю перетаскивать свой элемент, я изменяю принятие моей сетки следующим образом:
$('.grid-drop').droppable({
accept: '.unknown-class',
hoverClass: 'hovered',
drop: handlePublishBlock
});
Но, похоже, это не работает, я все еще могу перетащить свой элемент на сетку.
Я хочу сделать так, чтобы элемент с этим классом можно было перетаскивать только на одну каплю, а после этого его нельзя перетаскивать в другой раз, так что вот мой фактический код:
$(".draggable-one")
.mousedown(function() {
$('.grid-drop').droppable({
accept: '.unknown-class',
hoverClass: 'hovered',
drop: handlePublishBlock
});
console.log("mousedown");
isDragging = false;
})
.mousemove(function() {
console.log("mousemove");
isDragging = true;
})
.mouseup(function() {
console.log("mouseup");
var wasDragging = isDragging;
isDragging = false;
if (wasDragging) {
$('.grid-drop').droppable({
accept: '.block',
hoverClass: 'hovered',
drop: handlePublishBlock
});
$(this).draggable('disable');
$(this).removeClass('block-draggable');
}
});
Когда я начинаю перетаскивать, я отключаю перетаскивание на моей сетке (но, кажется, не работает), и когда я перетаскиваю на другое поле, кроме сетки (есть только одно другое поле), элемент не может быть перетащен в другой раз. Это работает, но отключение и повторное включение сетки не работает.
Может кто-нибудь мне помочь? Благодарю.
1 ответ
Не видя ваш полный код, трудно помочь. Я бы посоветовал что-то вроде этого:
$(function(){
var $grid = $('.grid-drop').droppable({
accept: '.block',
hoverClass: 'hovered',
drop: handlePublishBlock
});
var isDragging = false;
$(".draggable-one").draggable({
start: function(e, ui){
$grid.droppable("option", "accept", ".draggable-one");
console.log(e.type);
isDragging = true;
},
stop: function(e, ui){
$grid.droppable("option", "accept", ".block");
console.log(e.type);
isDragging = false;
}
});
});