jQuery 可拖动:仅在一个可拖放对象上拖动

Question

我有一个带有一些可拖放和可拖动的应用程序，我想为一种类型的可拖动(使用给定的类(做，这种可拖动只能放在一种类型的可拖放上。

问题是这取决于类，一开始可拖动对象可以在我的网格中拖动到任何地方：

$('.grid-drop').droppable({
accept: '.block',
hoverClass: 'hovered',
drop: handlePublishBlock
});

所以我所做的是当我开始拖动我的元素时，我会像这样更改网格的接受度：

$('.grid-drop').droppable({
accept: '.unknown-class',
hoverClass: 'hovered',
drop: handlePublishBlock
});

但这似乎不起作用，我仍然可以将我的 elem 拖到网格下降上。

我想做的是，具有此类的元素只能拖动到一个拖放，之后不能再拖动一次，所以这是我的实际代码：

$(".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');
}
});

当我开始拖动时，我禁用了网格上的拖放(但似乎不起作用(，当我拖放到网格以外的另一个字段(只有一个其他字段(时，元素无法再拖动一次。这有效，但禁用和重新启用网格不起作用。

谁能帮我？谢谢。

Answer 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;
}
});
});