Draggable div 到 droppable div inside another div

Question

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

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

Fiddle 这里：https://jsfiddle.net/150f6yrh/5/

Answer 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 选项，但这取决于您:)

希望对您有所帮助！

Draggable div 到 droppable div inside another div

Draggable div onto droppable div inside another div

jquery

jquery-ui

droppable

draggable