Question

方案

我在项目中有一个功能，我们必须在一个部分中添加一个注释，然后它可以移动到其他部分。这是一种任务跟踪。我可以将动态创建的注释添加到一个部分中，并使该注释可拖动。注释，部分是 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();
}

Answer 1

你可以试试这个： -

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

Answer 2

请研究此示例代码，

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> 部分{ background：rgba（0,0,0，.1）; 填充：20px; 身高：350px; 保证金：20px 0 0 0; border-radius：20px; } #myDiv { 光标：移动; 背景：红色; 身高：150px; 宽度：150px; 向左飘浮; } #targetDiv { 背景：红色; 身高：300px; 宽度：300px; 漂浮：对; } </style> </head> <body> <script> window.onload = function（）{ var count = 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 ='solid';＆gt;
      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>

拖放添加到另一个div中的div

2 个答案: