我正在构建一个小型 jquery 可拖放应用程序。您可以在这里看到它:
http://jsfiddle.net/franco13/AwnJA/1/
我需要执行以下操作,并且我对 jquery 中的拖放操作不熟悉,所以感谢您的协助。
我希望:
- 防止蓝色框被拖动到框 2,直到它被放入框 1
- 将蓝色框放入框 1 后,我想让它再次可拖动,以便将其放入框 2 中,同时留下克隆
像这样:
$( init );
function init() {
$('.teamEmblem').draggable({
// containment: $('.teamEmblem').parent(), // this does not work
cursor: 'move',
helper: 'clone',
obstacle: ".teamEmblem", // this does not work
preventCollision: true, // this does not work
revert: true
});
$('.winner').droppable({
hoverClass: 'hovered',
tolerance: 'touch',
drop: handleCardDrop2
});
}
function handleCardDrop2( event, ui ) {
if (true) {
ui.draggable.addClass('correct');
ui.draggable.draggable('disable');
$(this).droppable('disable');
var dragged = ui.draggable.clone(true);
dragged.position({
of: $(this),
my: 'left top',
at: 'left top'
}).css({
position: 'absolute',
display: 'block',
margin: '0 auto'
});
ui.draggable.draggable('option', 'revert', false);
$('body').append(dragged);
}
}
最佳答案
只需对起始代码进行一些小的更改,类似的东西应该可以工作,但我不确定它是否满足您的所有需求:
{我不确定您希望原始元素再次可拖动还是将克隆元素拖动到 box1 中}
function handleCardDrop2(event, ui) {
if (true) {
var $dragged = ui.draggable,
$draggedClone = $dragged.clone(),
$target = $(event.target);
if ($target.is('.box1')) $dragged.addClass('doppedBox1 correct');
else if ($target.is('.box2') && $dragged.is(':not(.doppedBox1)')) return false;
else if ($target.is('.box2')) $dragged.addClass('doppedBox2').draggable('disable');
$(this).droppable('disable');
$draggedClone.position({
of: $(this),
my: 'left top',
at: 'left top'
}).css({
position: 'absolute',
display: 'block',
margin: '0 auto'
});
ui.draggable.draggable('option', 'revert', false);
$('body').append($draggedClone);
}
}
关于jquery - 第一个实例完成后如何在 jquery 中复制可拖放实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16263164/