jquery - jquery拖拽切换新的可拖拽元素

Question

我对 Jquery 真的很陌生。我被要求做一些拖放功能。我设法找到了许多资源，这些资源使我得到了一个简单的结果。（http://jsfiddle.net/TgQTP/14/）。

缺少的是我想要一个开关功能。示例：当将蓝色方块拖到已经附加了另一个方块 (X) 的“.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);

        }            
    }

});

完整的 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）​</p>