Question

您好我的测试网站上有可拖动和可拖放的工作但是我想确定是否可以删除可拖动的条件或更严格的条件。所以不要只接受：'。draggable'，如下所示（工作正常）

$('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent, accept:'.draggable'});

我正在尝试使用函数代替accept选项，但是，它会破坏draggable / droppable。我正在尝试使用AJAX帖子检查是否应该允许移动，它会回复'false'或'true'。我找不到任何例子来完成我正在尝试的东西，我对javascript有点新鲜。我想知道是否有人可以指出为什么以下不起作用？

$('.droppable').droppable({drop: handleDropEvent, accept:function(elem) {
    if (elem.hasClass('draggable')) {
        $.post("drop.php", {droppableId: droppableId }).done(function(data) {
            if (data == 'false') { 
                return false;   
            } else { 
                return true;
            }
        }
    }
    }
});

编辑

我应该指出，AJAX调用在代码的其他地方工作正常，因此不会导致问题。我认为它是一种语法：（

来自mccannf的解决方案 - 在droppable占用时添加一个类，当某些东西移出它时删除。这是我完整的DnD代码：

$('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) {if (!$(this).hasClass('occupied')) {return true; }}}});

function handleDropEvent( event, ui ) {
    $('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
    $('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) {if (!$(this).hasClass('occupied')) {return true; }}}});
    $(this).addClass('occupied');
    ui.draggable.parent().removeClass('occupied');
    if($(ui.draggable).parent() !==$(this)){
        $(ui.draggable).appendTo($( this ));
    }
}

$（this）指的是接受draggable的droppable，ui.draggable.parent（）指的是draggable来自的droppable。

太棒了:)）

jquery droppable接受函数不起作用

0 个答案: