如何通过拖放重新排序 4 个 div（使用 angular2/4）？答案

【问题标题】：How to reorder 4 divs with drag and drop (using angular2/4)?如何通过拖放重新排序 4 个 div（使用 angular2/4）？
【发布时间】：2017-06-15 02:26:39
【问题描述】：

假设我有 4 个宽度和高度为 100 像素的 div，在一个宽矩形的父 div 中有一个“向左浮动”。是否有一些优雅的方法可以让我可以拖放 div 以在那个宽的水平条上重新排列它们？

【问题讨论】：

是否需要使用float？
目前我正在使用它来对齐页面上的 div，使它们在水平方向上彼此相邻。不知道我还能怎么做。如果有其他方法可以使它不使用浮动并且看起来相同，我愿意接受这种可能性。
我认为您可以使用flex-box 和DOM 操作来实现这一点。 css-tricks.com/snippets/css/a-guide-to-flexbox.. 使用 javascript 计算应将拖动元素放在哪个索引处，然后 flex-box 应处理其余部分。我现在没有时间提供一个可行的例子。

标签： javascript html css angular drag-and-drop

【解决方案1】：

这样的？找到了一个带有 jquery 的示例

$(function() {
  $(".column").sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"
  });

  $(".portlet")
    .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".portlet-header")
    .addClass("ui-widget-header ui-corner-all")
    .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

  $(".portlet-toggle").on("click", function() {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
  });
});

.column {
  width: 100px;
  height: 100px;
  float: left;
  padding-bottom: 100px;
}

.portlet {
  margin: 0 1em 1em 0;
  padding: 0.1em;
}

.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
}

.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}

.portlet-content {
  padding: 0.4em;
}

.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
  <div class="column">
    <div class="portlet">
      <div class="portlet-header">Feed</div>
      <div class="portlet-content">My Feed</div>
    </div>
    <div class="portlet">
      <div class="portlet-header">News</div>
      <div class="portlet-content">My News</div>
    </div>
  </div>
  <div class="column">
    <div class="portlet">
      <div class="portlet-header">Shop</div>
      <div class="portlet-content">My Shopping</div>
    </div>
  </div>
  <div class="column">
    <div class="portlet">
      <div class="portlet-header">Links</div>
      <div class="portlet-content">My Links </div>
    </div>
  </div>
</body>

【讨论】：