jQuery UI拖动，更新目标元素

问题描述

我正在尝试开发一个页面，以允许用户将元素(例如DIV)拖动到另一个DIV.

I am trying to develop a page that will allow users to drag an element(like a DIV) to another DIV.

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

Once the dragged element is over the target div and the user lets go of the mouse, the target div should have something happen to it. For example it should change colour and have some text inserted into it.

所以基本上，我想要的是一些如何知道该元素已被放置到目标div上的信息，以便我可以根据需要操纵目标div.

So basically what I want is for some how to know that the element has been dropped on the target div so that I can manipulated the target div however I want.

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

Here is my jsfiddle prototype. http://jsfiddle.net/WhesleyBarnard/3Lnxnc4o/1/The target div is the big green div.

因此，要回答我的问题，我只需要你们帮助我将目标div的颜色和文本放在元素上就立即更改.

So to answer my question I only need you guys to help me change the target divs colour and text as soon as the element is dropped on it.

先谢谢您.

当前代码摘录
HTML

Current Code Extract
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
    });
});

推荐答案

您应将目标<div>设置为 droppable 元素使用droppable()方法，则可以使用放置事件回调检测何时将某物品放下并使用this关键字操作该可放下物品:

You should make your target <div> a droppable element using droppable() method, then you can use the drop event callback to detect when an item is dropped and manipulate the droppable using this keyword:

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

这篇关于jQuery UI拖动，更新目标元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！