jQuery 可精确排序的列表 position/place

Question

是否可以使用 jQuery sortable 制作 2 个列表，一个源列表和一个目标列表。我想将项目从源列表移动到目标列表的确切位置。例如，源列表有 10 个项目，目标列表为空但有 10 个位置。然后，我想将项目从源列表拖放到位置 4 上的目标列表。

也许这张图片更好地说明了这一点：

谢谢！

$(document).ready(function() {
  $("#source, #target").sortable({
    connectWith: ".connectList",
  }).disableSelection();

});

ul li {
  background-color: #d6d3d3;
  margin: 5px;
  padding: 5px; 
  width: 100px;
  height: 20px;
}

#source {
  float: left;
  list-style:  none;
}

#target {
  float: left;
  list-style: none;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class="sortable-list connectList" id="source">
  <li class="warning-element">
    First
  </li>
  <li class="success-element">
    Second
  </li>
  <li class="info-element">
    Third
  </li>
  <li class="danger-element">
    Fourth
  </li>
</ul>

<ul class="sortable-list connectList" id="target">
  <li class="success-element">
    One
  </li>
</ul>

Answer 1

这不是完整的解决方案，但您可以从这里开始：

$(document).ready(function() {

  $("#target li").remove();
  $("#source li").clone().appendTo("#target");
  $("#target li").text("").addClass("empty");

  $("#source li").draggable({
    revert: "invalid",
    appendTo: 'body',
    helper: function(ev, ui) {
      return "<span class='helperPick'>" + $(this).html() + "</span>";
    },
    start: function(ev, ui) {
      ui.helper.width($(this).width());
    } // ensure helper width
  });

  $("#target .empty").droppable({
    tolerance: 'pointer',
    hoverClass: 'highlight',
    drop: function(ev, ui) {
      var item = ui.draggable;
      if (!ui.draggable.closest('.empty').length) item = item.clone().draggable(); // if item was dragged from the source list - clone it
      this.innerHTML = ''; // clean the placeholder
      item.css({
        top: -10,//to substract margin and pading
        left: -10
      }).appendTo(this); // append item to placeholder
    }
  });

/*
    $("#source, #target").sortable({
      connectWith: ".connectList",
    }).disableSelection();
*/
});

ul li {
  background-color: #d6d3d3;
  margin: 5px;
  padding: 5px;
  width: 100px;
  height: 20px;
}

#source {
  float: left;
  list-style: none;
}

#target {
  float: left;
  list-style: none;
}

.empty {
  width: 100px;
  height: 18px;
  margin: 5px;
  padding: 5px;
  background: #eee;
  border: 1px dashed #999;
}

.empty .item {
  margin: 0;
}

.empty .item .closer {
  display: block;
}

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class="sortable-list connectList" id="source">
  <li class="warning-element">
    First
  </li>
  <li class="success-element">
    Second
  </li>
  <li class="info-element">
    Third
  </li>
  <li class="danger-element">
    Fourth
  </li>
</ul>

<ul class="sortable-list connectList" id="target">
  <li class="success-element">
    One
  </li>
</ul>

jQuery 可精确排序的列表 position/place

jQuery sortable lists to exact position/place

jquery

jquery-ui-sortable