如何在第一个实例完成后在jquery中复制可拖动/可放置的实例

我正在构建一个小的jquery draggable / droppable应用程序。 你可以在这里看到它：

http://jsfiddle.net/franco13/AwnJA/1/

我需要做以下操作，我是新手，在jquery中拖放，所以谢谢你的协助。

我希望：

1. 防止蓝框被拖动到方框2，直到它被丢弃在方框1中
2. 一旦蓝色方框放入方框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); } } 

Answer 1

只需要从您的起始代码进行少量更改，类似的应该可以工作，但我不确定它是否符合您的所有需求：

{我不确定您是否希望再次拖动原始元素或在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); } } 

Answer 2

为了回答第1部分，我提出了类似这个小提琴的东西

基本概念是：

• 为你的回合添加一个索引，因为它们是推断的并且不够明确
• 将数据对象附加到每个可以在轮次中移动的对象，并跟踪它们在其中完成的内容
• 测试他们的数据对象

像这样。 请注意，我重新定义了li以将prereq作为属性，但您也可以使用数据

box 1

）

 var order = ['in1', 'in2', 'in3']; // round index // see your code $('.temEmblem').draggable({blah}).data('complete', { 'in1': true, 'in2': false, 'in3': false }); // attach data element to draggable element // see your code function handleCardDrop2(e, ui){ // see your handleCardDrop2 code var currentRd = $(this).attr('prereq'); var nextRd = order[order.indexOf($(this).attr('prereq')) + 1]; if (ui.draggable.data('complete')[currentRd]) { ui.draggable.data('complete', { nextRd: true }); // do the drop } else { // bail } // handleCardDrop2 code });