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

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

jQuery UI拖动，更新目标元素

1 个答案: