我对 Jquery 真的很陌生。我被要求制作一些拖放功能。我设法找到了许多资源，这些资源使我得到了一个简单的结果。 (http://jsfiddle.net/TgQTP/14/)。
缺少的是我想要一个开关功能。 例子: 当将蓝色方 block 拖动到已经附加了另一个方 block (X)的“.droppable”上时，我希望蓝色方 block 替换 X 并使 X 返回到特定位置。 X 可以通过动画返回或仅通过附加动画返回。
我的问题是不知道如何进行“切换”。
最佳答案
您可以在 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 )
关于Jquery 拖放切换新元素的可拖动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11860806/