Question

我是Jquery的新手。我被要求做一些拖放功能。我设法找到了很多资源，可以让我得到一个简单的结果。（http://jsfiddle.net/TgQTP/14/）。

缺少的是我想要一个开关功能。例：当将蓝色方块拖到已经附加了另一个方格（'）的'。droppable'上时，我希望蓝色替换X并使X返回到特定位置。 X可以通过动画返回，也可以通过附加它来返回。

我的问题是，不知道如何进行“切换”。

Answer 1

您可以在jsFiddle（http://jsfiddle.net/TgQTP/14/）中使用此功能执行拖放操作：

$('.draggable').each(function(index, div) {

    var scope = $(this).attr('data-scope');

    $(div).draggable({

        stop: function() {

            $('.droppable').droppable('option', 'disabled', false);

        },

        helper: 'clone'

    });

});

$('.droppable').droppable({      

    drop: function(event, ui) {

        var x = $(this).find('.draggable');

        if (! ($(this).attr('id') === 'bank')) {

            if (! x.length){

                $(this).append(ui.draggable);       

            } 

        } else {

            $('#bank').append($('.ui-draggable', this));

            $(this).append(ui.draggable);

        }            
    }

});

Full jsFiddle：http://jsfiddle.net/xWZcj/

要在方形开关返回上添加动画，请尝试以下操作：http://jsfiddle.net/xWZcj/1/

你可以换掉：

$('#bank').append($('.ui-draggable', this).hide().fadeIn(600));

使用jQuery UI提供的各种其他动画（http://docs.jquery.com/UI/Effects）

Jquery拖放开关可拖动元件用于新的

1 个答案: