在jquery界面中，点击拖放后的对象

我有一个盒子（第一个盒子）用来存放物品。这些物品可以放在下面两个盒子（第二个和第三个）中的任何一个。放下它后，我想在单击项目（位于第二个或第三个框中）后将这些项目返回到第一个框中，并将其从我放下的地方移除

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

<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>

内容
内容2
内容3
$（'.draggable'）.draggable({
助手：“克隆”，
回复：“无效”，
遏制：“文件”
});
//ui.draggable是被拖动项的对象
$（'#droppable1，#droppable2'）。可拖放({
接受：'.draggable'，
drop:函数（事件，ui）{
ui.draggable.remove（）；
$（本）
.append（ui.helper.addClass（'test'）.clone（false）.css({
位置：'相对'，
左：“0px”，
顶部：“0px”，
颜色：'红色'
})
);  
}
});  

---

在.draggable（）上有一些内置选项，将“还原”选项设置为“无效”，如果未成功将其拖放到可拖放文件上，它将返回，如下所示：

$(".draggable").draggable({ revert: 'invalid' });

$(".droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});​

然后在.droppable（）中，使用accept选项设置对拖放有效的内容，例如：

$(".droppable").droppable({ accept: '.draggable' });​

任何与此选择器不匹配的内容都会在释放时重置，您可以在此处看到完整的演示。如果需要筛选选择器无法提供的内容，则accept选项也会使用一个函数，如下所示：

$(".draggable").draggable({ revert: 'invalid' });

$(".droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});​

---

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

<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>

内容
内容2
内容3
$（'.draggable'）.draggable({
助手：“克隆”，
回复：“无效”，
遏制：“文件”
});
$（文档）.on（'单击'，'.draggable'，函数（）{
$（这个）。附加到（“#mainWell”）；
$（此）。可拖动({
助手：“克隆”，
回复：“无效”，
遏制：“文件”
});
});
//ui.draggable是被拖动项的对象
$（'#droppable1，#droppable2'）。可拖放({
接受：'.draggable'，
drop:函数（事件，ui）{
ui.draggable.remove（）；
$（本）
.append（ui.helper.addClass（'test'）.clone（false）.css({
位置：'相对'，
左：“0px”，
顶部：“0px”，
颜色：'红色'
})
);  
}
});  

---

我知道这些，但我想问的是，在我将项目放在第二个或第三个框中之后，当用户单击该项目时，它将返回到第一个框。请检查。这已经是正确的了，但问题是，如果我再次单击并拖动多次，我就不能再拖动了。@smzapp:Jashpreet Singh的伟大工作：谢谢。这是可行的，但问题是，如果我重复很多次，我就不能再拖动了。如果将所有项目放在一个框中，并单击其中一个项目，则所有项目都将返回。这也是一个问题@SMZAPP更新了答案，再试一次，您也可以在添加到第一个框时更改css