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

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">部分{背景：rgba（0，0，0，.1）; 填充：20px; 高度：350像素； 邊距：20px 0 0 0; border-radius：20px; } #myDiv {光標：移動； 背景：紅色； 高度：150px； 寬度：150像素； 向左飄浮; } #targetDiv {背景：紅色； 高度：300像素； 寬度：300像素； 浮動：正確； } </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';>
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 個解決方案

解決方案1
0 2013-12-19 07:24:47

解決方案2
0 2013-12-19 07:49:20

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

問題描述

2 個解決方案

解決方案1 0 2013-12-19 07:24:47

解決方案2 0 2013-12-19 07:49:20

解決方案1
0 2013-12-19 07:24:47

解決方案2
0 2013-12-19 07:49:20