如何使用 jQuery 的 droppble 函数添加自定义 DIV？

Question

我想通过拖放 <div> 添加一些自定义 <div> 元素。这是我的 JSFiddle for this.

我的目的是通过拖放 <div> 将名为“1”、“2”和“3”的自定义 <div> 添加到下面的 <div>。在删除 <div> '1' 时，我已将 innerHTML 文本设置为 "Hello World."。它适用于所有其他的。但是，我还有一些问题。

我的第一个问题是，一旦我放下 <div> '1' ，它将无法再次拖动此 <div> 。我怎样才能做到这一点？

我的另一个问题是我只是将 <div> 的 innerHTML 设置为 "Hello World."。但我想要的是每次当任何 <div> 下降到这个 <div> 时，它会附加我的自定义 <div> 和文本 "Hello World."，而不仅仅是设置 innerHTML。

请帮帮我。我正在寻找一些合适的建议。

$(function() {
    $(".draggable").draggable({
        connectToSortable: '#droppable',
        revert: true,
        helper: 'clone',
        start: function(event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
            $(this).fadeTo(0, 1);
        }
    });


    $("#droppable").droppable({
        hoverClass: 'active',
        drop: function(event, ui) {
            this.innerHTML = '<div>Hello World.</div>';
        }
    });
    
    $("#droppable").sortable();
    
});

body {
    font-family: sans-serif;
    font-size: 11pt;
}
.draggable {
    width: 250px;
    height: 20px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
.active {
    border: 2px solid #6699ff;
}
#droppable {
    font-size: 14pt;
    height:100px;
    width: 400px;
    background-color:gray;
}
#droppableHolder {
    margin-top: 5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.2/jquery-ui.min.js"></script>
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
<div id="droppableHolder">
    Drop in this text box:<br />
    <br />
    <div id="droppable"></div>
</div>

Answer 1

你的第一个问题就这样解决了。

$(".draggable").draggable({
        revert: true,
        appendTo: "body",
        helper: 'clone',
        start: function(event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
            $(this).fadeTo(0, 1);
        }
    });

Click here

我已经编辑我的答案以设置文本而不是 innerhtml。

Answer 2

您可以使用 append 而不是 innerHTML。

但是由于这将在每个 drop 上触发，您需要验证 drop 是由可拖动对象之一触发的，而不是您的自定义 div .你可以这样做：

     if (ui.draggable.hasClass('draggable')) {
              var newDiv = $('<div>Hello World.</div>');
              $(this).append(newDiv);
          }
     }

此外，如上一个回答所述，删除 connectToSortable，您不需要它。

http://jsfiddle.net/y9q5hu01/2/

编辑：

为了能够使用 connnectToSortable，您可以修改已删除 div 的 html 内容，而不是创建新内容。像这样：

   drop: function (event, ui) {
        if (ui.draggable.hasClass('draggable')) {
            ui.draggable.html('<div>Hello World.</div>').removeClass('draggable');
        }
    }

http://jsfiddle.net/y9q5hu01/3/

如何使用 jQuery 的 droppble 函数添加自定义 DIV？

How to add custom DIV using droppble function of jQuery?

html

javascript

css

jquery