拖动图片，附加与图片对应的 html

Drag a picture, append html that corresponds to the picture

本文关键字：html 拖动      更新时间：2023-09-26

我是jQuery的新手，我想创建一个拖放HTML构建器。

我有

2 个div：在第一个中，我有代表另一个div 中的 HTML 块的图片，我希望有一个可排序的列表，其中包含与删除的图片对应的div。

我尝试了很多东西，但它不起作用。这是我尝试过的多个代码部分之一： 

<html>
<head>
    <meta charset="utf-8">
    <title>Drag and Drop tests</title>
    <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>
</head>
<body>
    <style>
        #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
                });
            });
            $(function(){
                $(".my_div").draggable({
                    connectToSortable: "#left",
                    helper: "clone",
                    stop: function(e, ui){
                        $("#left").clone().append($(".bloc[data-id="+$(this).attr("data-id")+"]"));
                    }
                });
            });
            $("div").disableSelection();
        }); 
    </script>
    <div class="bloc" id="div_1" data_id="1"></div>
    <div class="bloc" id="div_2" data-id="2"></div>
    <div id="wrap" style="width:1000px;margin:auto"> 
        <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">
                            <img src="_pictures/1.png" alt="héhé" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </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é" />
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
</body>

或者，如果您愿意：https://jsfiddle.net/m2Lnzr1m/

您可以通过合并两个已经开发的概念来实现此目的。通过 jQuery tinysort 对列表进行排序 + 通过 jQuery UI 连接列表。如果您可以获得 2 行列表工作的基本概念，那么您可以添加更多并用图像填充列表内容。 我已经更新了代码，从<li>标签开始，然后将它们转换为<div>标签。 这样，您就可以使代码在概念上保持流畅（也就是说，您应该使用列表），但改用div。

小提琴示例

var origSort1 = $('#sortable1').html();
var origSort2 = $('#sortable2').html();
$('button#sort').on("click", function(e) {
  e.preventDefault();
  triggerSort();
});
//http://stackoverflow.com/a/8584217/5076162
(function($) {
  $.fn.changeElementType = function(newType) {
    this.each(function() {
      var attrs = {};
      $.each(this.attributes, function(idx, attr) {
        attrs[attr.nodeName] = attr.nodeValue;
      });
      $(this).replaceWith(function() {
        return $("<" + newType + "/>", attrs).append($(this).contents());
      });
    });
  };
})(jQuery);
$("ol").changeElementType("div");
$("li").changeElementType("div");
function triggerSort() {
  if ($('#sortable2 .li').length > 0) {
    tinysort('#sortable2>.li', {
      selector: 'img',
      attr: 'title'
    });
    numberItems();
    removeNumberedItems();
  } else {
    return false;
  }
}
$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-state-highlight"
  }).disableSelection();
});
$('#sortable2').on('mouseenter, mouseoutm mousemove', function() {
  numberItems();
});
$('#sortable1').on('mousemove', function() {
  removeNumberedItems();
});
function numberItems() {
  $('#sortable2').find($('.listNum')).each(function(i) {
    $(this).text(i + 1);
  });
}
function removeNumberedItems() {
  $('#sortable1').find($('.listNum')).each(function(i) {
    $(this).text("");
  });
}
img {
  width: 150px;
  clear: both;
  display: block;
}
#img02 {
  border: solid 3px #ACE;
}
#img01 {
  border: solid 2px #FF0;
}
button {
  clear: both;
  width: 404px;
  height: 20px;
  display: inline-block;
}
div#sortable1,
div#sortable2 {
  float: left;
  clear: none;
  padding-left: 25px;
  margin: 0;
}
div#sortable1 {
  float: left;
  clear: none;
  list-style-type: none;
}
div#sortable1,
div#sortable2 {
  min-height: 175px;
  max-width: 175px;
  min-width: 175px;
  border: solid 1px #000;
}
.ui-state-highlight {
  border: solid 1px #ACE;
  height: 45px;
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<ol id="sortable1" class="connectedSortable ol">
  <li class="ui-state-default li">Item <span class='listNum'></span>
    <img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" />
  </li>
  <li class="ui-state-default li">Item <span class='listNum'></span>
    <img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2">
  </li>
</ol>
<ol id="sortable2" class="connectedSortable ol">
</ol>
<button id='sort'>Sort by Title Value</button>

$('button#sort').on("click", function(e) {
  e.preventDefault();
  triggerSort();
});
function triggerSort() {
  if ($('ol#sortable2 li').length > 0) {
    tinysort('ol#sortable2>li', {
      selector: 'img',
      attr: 'title'
    });
  } else {
    return false;
  }
}
$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});
img {
  width: 150px;
  clear: both;
  display: block;
}
#img02 {
  border: solid 3px #ACE;
}
#img01 {
  border: solid 2px #FF0;
}
button {
  clear: both;
  width: 100%;
  height: 20px;
  display: inline-block;
}
ol#sortable1,
ol#sortable2 {
  float: left;
  clear: none;
  padding-left: 25px;
  margin: 0;
}
ol#sortable1 {
  float: left;
  clear: none;
  list-style-type: none;
}
ol#sortable1,
ol#sortable2 {
  min-height: 175px;
  max-width: 175px;
  min-width: 175px;
  border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<ol id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1<img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" /></li>
  <li class="ui-state-default">Item 2<img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2"></li>
</ol>
<ol id="sortable2" class="connectedSortable">
</ol>
<button id='sort'>Sort by Title Value</button>

相关文章：