jQuery UI 拖动，更新目标元素

Question

我正在尝试开发一个允许用户将元素（如 DIV）拖到另一个 DIV 的页面。

一旦拖动的元素在目标 div 上并且用户放开鼠标，目标 div 应该会发生一些事情。例如，它应该改变颜色并在其中插入一些文本。

所以基本上我想要的是一些如何知道元素已被放置在目标 div 上，以便我可以随心所欲地操纵目标 div。

这是我的 jsfiddle 原型。 http://jsfiddle.net/WhesleyBarnard/3Lnxnc4o/1/ 目标 div 是绿色的大 div。

所以要回答我的问题，我只需要你们帮助我在元素拖放到目标 div 后立即更改其颜色和文本。

提前谢谢你。

当前代码摘录
HTML

<div id="div1"><div></div></div>
<div id="div2"></div>

CSS

#div1 {
    height: 100px;
    background-color: red;
    margin-bottom: 50px;
    padding: 5px;
}
#div1 div {
    width: 30px;
    height: 30px;
    border: solid 1px black;
}
#div2 {
    height: 100px;
    background-color: green;
    padding: 5px;
}

jQuery

$(document).ready(function() {
    $('#div1 div').draggable({
        cursor: "none",
        revert: true
    });
});

Answer 1

您应该使用droppable() 方法将您的目标<div> 设置为droppable 元素，然后您可以使用drop event 回调来检测项目何时被丢弃并使用this 关键字操作droppable：

$(document).ready(function() {
  $('#div1 div').draggable({
    cursor: "none",
    revert: true
  });
   $('#div2').droppable({
     drop:function(){
         $(this).css("background","dodgerblue").text("Something is dropped!")
     }
  });
});

#div1 {
    height: 50px;
    background-color: red;
    margin-bottom: 50px;
    padding: 5px;
}
#div1 div {
    width: 30px;
    height: 30px;
    border: solid 1px black;
}
#div2 {
    height: 50px;
    background-color: green;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div id="div1"><div></div></div>
<div id="div2"></div>