Question

我遇到了一个问题，这对于周围的一些聪明人来说很容易解决。我好几天都不知道了。

我成功使用jQuery创建了draggables和droppables。我无法解决的唯一问题如下：

如何确保只能将拖动拖动到droppable？如果它没有被拖放到一个droppable中，它应该返回到它的起始位置。

我使用以下代码（成功运行）确保只能将拖动拖动到droppable，否则它将跳回到它的起始位置。

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

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

但是，如果已将其拖入droppable，我该怎么办？当我将一个draggable拖入droppable，然后再将其拖到外面时，它可以保留在屏幕上的任何位置（这是因为我将该选项设置为false：ui.draggable.draggable( 'option', 'revert', false );我需要draggable再次返回到它的起始位置它被拖出了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();
});

Answer 2

<强> DEMO

js code：

$( init );

function init() {
    // Create droppable
            $('<div id="slot1"></div>').appendTo( '#questionSlots' ).droppable( {
              accept: '#questionsHolder div',
              hoverClass: 'hovered',
                drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }
            } );

    $('#questionsHolder').droppable( {
              //accept: '#slot1 div',
              hoverClass: 'ui-state-highlight',
                 drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }            
            } );

// Make question draggable
    $("#question1").draggable( {
        cursor: 'move',
        //snap: '#content',
        revert: 'invalid'
        } );


}

jQuery - 如何确保draggable只能拖动到2个位置？

2 个答案: