Question

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

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

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

我的另一个问题是，我只是将innerHTML的{{1}}设置为<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内容，而不是创建新内容。像这样：

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

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

Answer 2

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

switch(x) {
    case 'The pyramids of Giza':
        console.log(x); // output: 'The pyramids of Giza'
        break;
    case 'The Leaning Tower of Pisa':
        console.log(x); // output: 'The Leaning Tower of Pisa'
        break;
    default:
        console.log('Not found');
}

Click here

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

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

2 个答案: