jQuery可拖动+可排序：如何在追加到可排序之前更改可拖动元素

Question

我正在尝试制作一个 拖放 html 构建器（如 mailchimp），我希望在右侧有 15 个 代表 html 代码的图片并将它们放到一个可排序的列表。但是当图片被放到可排序列表中时，我想在 html 代码中更改拖动的图片。问题是效果不好……

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <style>
        .bloc{height:200px;width:400px;border: 2px solid green;}
        #div_1{height:200px;width:400px;border:5px dotted red;}
        #div_2{height:200px;width:400px;background-color:yellow;}
        #left{
            width:400px;
            min-height:400px;
            max-height:;
            float:left;
            border:1px solid black;
            margin:0;padding:0;
        }
        #right{
            width:420px;
            float:right;
            border: 1px solid red;
            margin:0;
            padding:0;
        }
    </style>

    <script>
        $(function(){
            $(function(){
                $("#left").sortable({
                    revert: true,
                    axis: "y",
                    receive: function(e,ui){
                        var myDataId= $(ui.item).attr("data-id");

                        alert(ui.item[0]);
                        alert($("#left").children().attr("alt"));
                        $("#left ui.item").replaceWith($("#petit_div .bloc[data-id="+ myDataId +"]").show());
                        alert(myDataId);

                        //$(ui.item).replaceWith("$(.bloc[data-id="+ dropElementDataId +"])");
                        /*
                        var dropElementDataId = $(ui.item.parent).attr("data-id");
                        alert(ui.item.parent().attr("data-id"));
                        $(ui.item).replaceWith("$(.bloc[data-id="+ dropElementDataId +"])");
                        */
                    }
                }).disableSelection();
            }); 
            $(function(){
                $(".my_div").children().draggable({
                    connectToSortable: "#left",
                    helper: "clone",
                    revert: "invalid"
                });
            });
        }); 
    </script>

    <div id="wrap" style="width:1000px;margin:auto"> 
        <div id="petit_div">
            <div class="bloc" id="1" data-id="1" style="display:none">Ceci est le div 1</div>
            <div class="bloc" id="2" data-id="2" style="display:none">Ceci est le div 2</div>
            <div class="bloc" id="3" data-id="3" style="display:none">Ceci est le div 3</div>
            <div class="bloc" id="4" data-id="4" style="display:none">Ceci est le div 4</div>
            <div class="bloc" id="5" data-id="5" style="display:none">Ceci est le div 5</div>
            <div class="bloc" id="6" data-id="6" style="display:none">Ceci est le div 6</div>
            <div class="bloc" id="7" data-id="7" style="display:none">Ceci est le div 7</div>
            <div class="bloc" id="8" data-id="8" style="display:none">Ceci est le div 8</div>
            <div class="bloc" id="9" data-id="9" style="display:none">Ceci est le div 9</div>
            <div class="bloc" id="10" data-id="10" style="display:none">Ceci est le div 10</div>
            <div class="bloc" id="11" data-id="11" style="display:none">Ceci est le div 11</div>
            <div class="bloc" id="12" data-id="12" style="display:none">Ceci est le div 12</div>
            <div class="bloc" id="13" data-id="13" style="display:none">Ceci est le div 13</div>
            <div class="bloc" id="14" data-id="14" style="display:none">Ceci est le div 14</div>
            <div class="bloc" id="15" data-id="15" style="display:none">Ceci est le div 15</div>
        </div>

        <div id="left">

        </div>

        <div id="right" >
            <table width="100%" style="text-align:center;height:100%">
            <tbody>
                <tr style="height:133px">
                    <td>
                        <div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1" alt="alt_div_image_1">
                            <img src="_pictures/1.png" alt="héhé" data-id="1"/>
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2">
                            <img src="_pictures/2.png" alt="héhé" data-id="2"/>
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3">
                            <img src="_pictures/3.png" alt="héhé" data-id="3"/>
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4">
                            <img src="_pictures/4.png" alt="héhé" data-id="4"/>
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5">
                            <img src="_pictures/5.png" alt="héhé" data-id="5"/>
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="6">
                            <img src="_pictures/6.png" alt="héhé" data-id="6"/>
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="7">
                            <img src="_pictures/7.png" alt="héhé" data-id="7"/>
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="8">
                            <img src="_pictures/8.png" alt="héhé" data-id="8"/>
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="9">
                            <img src="_pictures/9.png" alt="héhé" data-id="9"/>
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="10">
                            <img src="_pictures/10.png" alt="héhé" data-id="10"/>
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="11">
                            <img src="_pictures/11.png" alt="héhé" data-id="11"/>
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="12">
                            <img src="_pictures/12.png" alt="héhé" data-id="12"/>
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="13">
                            <img src="_pictures/13.png" alt="héhé" data-id="13"/>
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="14">
                            <img src="_pictures/14.png" alt="héhé" data-id="14"/>
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="15">
                            <img src="_pictures/15.png" alt="héhé" data-id="15"/>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>

你可以在这里看到我的代码：https://jsfiddle.net/9r8h8y57/

谢谢。

Answer 1

我最近做了这样的事情，我在图像上有 ID，所以我知道要删除什么，并且根据通过的 ID，我只是在我想要的 html 上附加

     $( '.droppable' ).droppable({
         drop: function( event, ui ) {
            id = $(ui.draggable).attr('id');
            switch(id){
                case '1':
                    $('#container').append('*html*');
                    break;
            }
        },
    });

不确定这是否有帮助，但这是另一种方法！我有 droppable 那里，但 sortable 将工作相同。

Answer 2

扩展 Scannerz 的回答。在全局空间中，我建议创建一个像这样的对象：

var html = {
  1: $("<div>", { id: 1, class: 'bloc', data-id: 1}).html("Ceci est le div 1"),
  2: $("<div>", { id: 2, class: 'bloc', data-id: 2}).html("Ceci est le div 2"),
  n: $("<div>", { id: n, class: 'bloc', data-id: n}).html("Ceci est le div n")
}

然后你就可以调用你想要的对象了：

$('#container').append(html[$(ui.draggable).attr('id')]);

另一种选择是在作为助手被拾取时简单地创建对象。我最近有一个有点相关的问题：https://jsfiddle.net/Twisty/Lbu7ytbj/ 在其中，助手必须是一组多个项目。

对于您的用例，我们创建一个函数来附加正确的内容：

https://jsfiddle.net/Twisty/nfz2qwp1/1/

$(function() {
  $("#left").sortable({
    revert: true,
    axis: "y",
    update: function(e, ui) {
      if (!ui.item.hasClass("new")) {
        return true;
      }
      var newBloc = $("<div>", {
        id: ui.item.data("id").length ? ui.item.data("id") : $("#left .bloc").length + 1,
        class: ui.item.attr("class")
      }).data({
        id: ui.item.data("id"),
        type: ui.item.data("type")
      }).html("Ceci est le div " + ui.item.data("id"));
      ui.item.remove();
      newBloc.removeClass("new");
      $("#left").append(newBloc);
    }
  }).disableSelection();
  $("#right .my_div").draggable({
    connectToSortable: "#left",
    helper: "clone",
    revert: "invalid"
  });
});