Question

我是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/

Answer 1

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

Fiddle Example

＆＃13;

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("");
  });
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

$('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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: