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

Question

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

我的目的是添加自定义 <div>关于 <div> 的拖放在下面的 <div> 中命名为 '1' 、 '2' 和 '3' .关于 <div> '1'，我设置了innerHTML发短信给"Hello World." .它适用于所有其他的。但是，我仍然有一些问题。

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

我的另一个问题是我只是设置了 innerHTML的 <div>至 "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

您可以使用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 内容，而不是创建一个新的div。像这样:

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

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