可在 div 外拖动和排序答案

【问题标题】：Dragable and sortable outside div可在 div 外拖动和排序
【发布时间】：2019-09-24 12:16:32
【问题描述】：

猜想我们有一个 128x512px 库存的 div 网格。我希望所有（项目 64x64px）div 都可以通过拖动 tehm 捕捉到网格。在库存中，div 必须是可排序的。我不想要清单。通过使用 jquery 或 js 以最简单的方式进行任何建议。

combine ui dragable and sortable 

<style>  #snaptarget { 
  height: 128px; width:512; 
   display: grid;
  grid-gap: 64px 64px;  background:green;
     }
 .item { border:thin solid black; display: inline-block;width: 64px;height:64px; background:yellow; display:inline-block;float:right; }</style>

<div id=snaptarget></div>

<div class="item sortable"><img></div>

【问题讨论】：

请澄清您所说的“我不想要列表”是什么意思。您在这里尝试了什么？您对此有何疑问？
不使用
标签

【解决方案1】：

我做了很多猜测，因为没有可以参考的例子。我使用 flex 和 row 作为显示，如果您愿意，可以更改为 column。

$(function() {
  $("#sortable").sortable({
    revert: true
  });
  $("#holder .item").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $("#sortable,#sortable .item,#draggable,#draggable .item").disableSelection();
});

.container {
  display: flex;
  height: 128px;
  width: 512;
  padding: 1em;
  flex-direction: row;
  font-color: white;
}

#sortable {
  background-color: green;
}

#holder {
  background-color: lime;
}

.item {
  border: thin solid black;
  min-width: 64px;
  min-height: 64px;
  background-color: pink;
  flex: auto;
  width: 64px;
  height: 64px;
}

div.item {
  display: inline-block;
}

.ui-widget-header p,
.ui-widget-content p {
  margin: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha256-AjyoyaRtnGVTywKH/Isxxu5PXI0s4CcE0BzPAX83Ppc=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<div id="holder" class="container">
  <div class="item ui-state-highlight">Drag me down</div>
</div>

<div id="sortable" class="container ui-widget-header">Put stuff in here
  <div class="item ui-state-highlight">Item 1</div>
  <div class="item ui-state-highlight">Item 2</div>
  <div class="item ui-state-highlight">Item 3</div>
  <div class="item ui-state-highlight">Item 4</div>
  <div class="item ui-state-highlight">Item 5</div>
</div>

【讨论】：

非常感谢，这对我帮助很大！很接近我的想象
只是另一个线索，是否可以存储具有相同属性的项目？
不知道你这个问题是什么意思。
我的意思是，如果您向 item 元素添加一个类，当它们具有相同的属性时，它们将隐藏在同一字段中。猜想他们应该依靠球场。顺便说一句，如果您之后像这样将 div 添加到持有人：
var $jqnewdiv1 = $jq("
"), existingdiv1 = document.getElementById( “持有者” ）; $jq("#holder").append($jqnewdiv1,existingdiv1);