Jquery拖放开关可拖动元素为新的
问题描述:
我真的很新jquery。我被要求做一些拖放功能。我设法找到了很多能够让我获得简单结果的资源。 (http://jsfiddle.net/TgQTP/14/)。Jquery拖放开关可拖动元素为新的
缺少的是我想要的切换功能。 例如: 将蓝色方块拖到已添加了另一个正方形(X)的'.droppable'上时,我希望蓝色替换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)
你说你想“让X回到特定的地方”。这是否意味着你想要蓝色始终回到蓝色的原始位置,或者只是回到原来的颜色库?以下是后者的工作方式:http://jsfiddle.net/xWZcj/让我知道你是否在寻找前者。 – 2012-08-08 09:19:02
$('。ui-draggable',this)这就是我错过的东西。我总是做$(this).draggable想着我会到达ui.draggable对象。如果我想要动画,我应该使用.animate还是尝试恢复这个? – FEST 2012-08-08 10:05:47