将添加的 div 拖放到另一个 div 中答案

【问题标题】：Drag and drop a div added into another div将添加的 div 拖放到另一个 div 中
【发布时间】：2013-12-19 06:47:44
【问题描述】：

场景

我的项目中有一个功能，我们必须在一个部分中添加一个注释，然后可以将它移动到其他部分。这是一种任务跟踪。我能够将动态创建的注释添加到一个部分中，并使该注释可拖动。注意，部分是divs。

问题

我无法将笔记拖到其他部分或 div。注释可在其自己的部分 (div) 中拖动。请帮助我解决问题，以便将其移至其他部分。

这是我的 HTML 代码：

<div id="addTaskDiv" style="height: 150px">
        <a id="addTask" onclick="AddNote();">ADD Task</a> <a id="a1" onclick="AddText();">Submit</a>
    </div>
    <div id="MySplitter">
        <div id="leftDiv" style="height: 150px; border-style: groove; width: 100%;">
            left here
        </div>
        <div id="splitterUpperDiv">
            <div id="midDiv" style="height: 150px; border-style: groove; width: 100%;">
                middle here
            </div>
            <div id="rightDiv" style="height: 150px; width: 100%; border-style: groove;">
                right here
            </div>
        </div>
    </div>

这是我的 .js

$().ready(function () {
    $("#MySplitter").splitter();
    $("#splitterUpperDiv").splitter();
    $("#rightDiv").droppable();
    $("#midDiv").droppable();
    $("#leftDiv").droppable();
});

function AddNote(args, seder) {
    var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
    var br = document.createElement("br");
    $("#addTaskDiv")[0].appendChild(br);
    addArea();
    return false;
}

function addArea() {
    var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
    var button = $(this);
    var commentField = $('<textarea/>'); // create a textarea element
    commentField[0].id = 'added' + i;

    commentField
        .css({
            position: 'absolute',
            width: 200,          // textbox 200px by 100px
            height: 100
        })
    // set the textarea's value to be the saved content, or a default if there is no saved content
        .val(button.data('textContent') || 'This is my comment field\'s text')
    // set up a keypress handler on the textarea
        .keypress(function (e) {
            if (e.which === 13) { // if it's the enter button
                e.preventDefault(); // ignore the line break
                button.data('textContent', this.value); // save the content to the button
                $(this).remove(); // remove the textarea
            }
        })
        .appendTo($("#addTaskDiv")[0]); // add the textarea to the document
}

function AddText() {
    var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
    var a = $("#added0")[0].value;
    var x = document.createElement("div");
    x.width = '200px';
    x.height = 'auto';
    x.id = 'lable' + i;
    this.rel = i + 1;
    x.innerText = a;
    var br = document.createElement("br");
    $("#leftDiv")[0].appendChild(br);
    $("#leftDiv")[0].appendChild(x);
    $("#lable" + i + "").draggable();
}

【问题讨论】：

标签： javascript jquery .net drag-and-drop

【解决方案1】：

你可以试试这个：-

$("#rightDiv").droppable({
 accept: '.draggableObject',
});

【讨论】：

【解决方案2】：

请研究此示例代码，

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> 部分{ 背景：rgba(0, 0, 0, .1); 填充：20px；高度：350px；边距：20px 0 0 0；边框半径：20px； } #myDiv{ 光标：移动；背景：红色；高度：150px；宽度：150px；向左飘浮; } #targetDiv{ 背景：红色；高度：300px；宽度：300px；浮动：对； } </style> </head> <body> <script> window.onload = 函数（）{ 变量计数=0； var myDiv=document.getElementById('myDiv'); var targetDiv=document.getElementById('targetDiv');
myDiv.addEventListener('dragstart', function(e)
{
/* change ui to see clearly */
this.style.opacity= 0.2;
this.style.borderStyle= 'dashed';     
targetDiv.style.backgroundColor= 'yellow';

/* set text from this as an argument to transfer */
e.dataTransfer.setData("Text", this.innerHTML);
}, false);
myDiv.addEventListener('dragend', function(e) { /* 改变 ui 看清楚 */ this.style.opacity=1; this.style.borderStyle='实心';>
targetDiv.style.backgroundColor='红色';
/* change text of dragend div */
this.innerHTML="Total Count : "+ (++count) ;
}, false);

targetDiv.addEventListener('dragover', function(e)
{
/* change ui to see clearly */
  this.style.backgroundColor='green';
  if(e.preventDefault){ e.preventDefault(); };
},false);

targetDiv.addEventListener('dragleave', function(e)
{
/* change ui to see clearly */
this.style.backgroundColor='yellow';    
}, false);

targetDiv.addEventListener('drop', function(e)
{
/* get text from dropped div */
  this.innerHTML= e.dataTransfer.getData("Text");
  if( e.preventDefault ){ e.preventDefault(); };
},false);

}
</script>

<div draggable="true" id="myDiv"> 可拖动区域。 </div> <div id="targetDiv"> 目标区域。 </div> </body> </html>

【讨论】：