javascript - 将一个 div 拖放到另一个 div 中

Question

场景

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

问题

我无法将注释拖到其他部分或 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',
});