jquery - 在 jquery ui 中放置后单击对象

Question

我有一个盒子(第一个盒子)来存放元素。这些元素可以掉落到下面的两个盒子(第二个和第三个)中的任何一个中。放下它后，我想在单击项目(位于第二个或第三个盒子中)后将这些项目返回到第一个盒子，并将其从我放下的地方删除。

有人知道吗？下面是我的代码:

<div class="well">
    <div class="draggable">CONTENT</div>
    <div class="draggable">CONTENT 2</div>
    <div class="draggable">CONTENT 3</div>
</div>
<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>

<script>
$('.draggable').draggable({
    helper: 'clone',
    revert: "invalid",  
    containment: "document"   
});


//ui.draggable is the object of dragged item
$('#droppable1, #droppable2').droppable({
    accept: '.draggable',
    drop: function (event, ui) {  
        ui.draggable.remove();
        $(this)
            .append(ui.helper.addClass('test').clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px',
                color:'red'
            })
        );  
    }
});  
</script>

http://jsfiddle.net/tq2j4wot/5/

Answer 1

尝试在拖动的元素上添加点击事件

<div class="well" id ="mainWell">
    <div class="draggable">CONTENT</div>
    <div class="draggable">CONTENT 2</div>
    <div class="draggable">CONTENT 3</div>
</div>
<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>


<script>

$('.draggable').draggable({
    helper: 'clone',
    revert: "invalid",  
    containment: "document"   
});

$(document).on('click','.draggable',function(){
 $(this).appendTo('#mainWell');
   $(this).draggable({
      helper: 'clone',
      revert: "invalid",  
      containment: "document"   
  });
});
//ui.draggable is the object of dragged item
$('#droppable1, #droppable2').droppable({
    accept: '.draggable',
    drop: function (event, ui) {  
        ui.draggable.remove();
        $(this)
            .append(ui.helper.addClass('test').clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px',
                color:'red'
            })
        );  
    }
});  
</script>

Working Example Link