可拖动 div 到另一个 div 内的可放置 div

【问题标题】：Draggable div onto droppable div inside another div可拖动 div 到另一个 div 内的可放置 div
【发布时间】：2017-04-05 19:11:53
【问题描述】：

我有两个并排的 div。左侧的 div 包含奖学金申请者的姓名。右侧的 div 包含申请人推荐信的文件名。我希望能够将文件名拖到左侧 div 并将它们放在相应申请人的名称上。但是，文件名不会让自己被拖到 div 之外。有什么帮助吗？是否需要将父 div 名称添加到可放置元素？

$(".drop_applicant").droppable();

在这里提琴：https://jsfiddle.net/150f6yrh/5/

【问题讨论】：

标签： jquery jquery-ui draggable droppable

【解决方案1】：

更新的 JSFiddle

$(".drag_letter").draggable({
   cursor: 'move',
   revert: true,
   helper: 'clone'   
});


$(".drop_applicant").droppable({
    accept: '.drag_letter',
 drop: function(event, ui){
            alert(ui.draggable.prop("id") + " dropped onto " + $(this).prop("id"));
        }

 });

https://jsfiddle.net/150f6yrh/8/

我个人喜欢在可拖动对象上删除 revert: true 选项，但这取决于你 :)

希望对你有帮助！

【讨论】：