jQuery - 如何确保draggable只能被拖动到2个地方？

Question

我遇到了一个小问题，对于这里的一些聪明人来说很容易解决。这几天我一直在为这件事伤透脑筋。

我成功地使用 jQuery 创建了可拖动和可放置的对象。我唯一无法解决的问题是:

如何确保可拖动对象只能拖动到可放置对象？如果它没有被拖到可放置的内部，它应该返回到它的起始位置。

我使用以下代码(成功运行)来确保可拖动对象只能拖动到可放置对象，否则它将跳回其起始位置。

var question = '#question' + i;
    $(question).draggable( {
        containment: '#content',
        cursor: 'move',
        snap: '#content',
        revert: 'invalid',
);

revert: invalid部分可以解决问题。

但是，当它已经被拖入可放置对象时，我该如何执行此操作？当我将一个可拖动对象拖入可放置对象中，然后再次将其拖到外面时，它可以保留在屏幕上的任何位置(这是因为我将该选项设置为 false: ui.draggable.draggable( 'option', 'revert', false ); 我需要可拖动对象再次返回到其起始位置)从 droppable 中拖出。

有人能把我推向正确的方向吗？/有什么建议吗？

JSFiddle:Click here

干杯!

Answer 1

您可以使用建议的恢复功能 here :(使用 jsfiddle 示例 here )

$(function() {
    $("#draggable").draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $("#droppable").droppable();
});