Question

我想要允许拖动任何地方的元素。但是，如果它被丢弃到拒绝它的droppable（通过接受），我希望它在拖动之前恢复到原始位置。我怎么能做到这一点？

编辑：更具体一点：我希望能够满足两个条件才能将项目移回：1。它被丢弃在一个droppable上2.该droppable没有接受所述项目。 Draggable的还原选项仅检查条件2。

Answer 1

我有一些我认为应该有用的代码。请注意，它不使用accept选项指定droppables将接受哪些可拖动项。相反，您必须检查是否应在drop事件中手动拒绝可拖动。

$(document).ready(function() {
    $('.droppable-class').droppable({
        drop: function(event, ui) {
            // check whether or not draggable should be rejected here...
            if (...) {
                ui.draggable.data('rejected', true);
            }
        }
    });

    $('.draggable-class').draggable({
        revert: false,
        start: function(event, ui) {
            ui.helper.data('rejected', false);
            ui.helper.data('original-position', ui.helper.offset());
        },
        stop: function(event, ui) {
            if (ui.helper.data('rejected') === true) {
                ui.helper.offset(ui.helper.data('original-position'));
            }
        }
     });

Answer 2

你想使用可排序的家伙 - 比如：

    $('#sortable-area').sortable({
    accept: '.child',
    items: '.child',
    revert: 300,
    opacity: 0.8,
    containment: 'document'
});

如果元素不足以替换其他元素之一，则应自动将元素捕捉回来。你只需把它放在容器上

如果拖动到无效的droppable上，如何才能使draggable恢复到原始位置？

2 个答案: