jquery droppable/html5 api - 如何使元素可拖放和可拖动

Question

我知道如何制作一个可拖动的元素，并且可以将其拖放到某个 dropzone 中，但是我怎样才能使这个 droppable 元素在另一个 dropzone 中也可以拖动？所以让我们想象一下，我有一个可放置的容器，在这里我可以移动元素（可以说是垂直的），另外我可以将一些元素放入这些 daggable 元素中并在 em 中移动它们。有可能吗？

Answer 1

您可以将类用作容器，您可以在其中对可拖动和/或可排序的div 元素进行排序或删除。

然后您可以复制该类，例如类dropzone。这样可以将元素从一个 div 拖到另一个 div 上，并且可以对它们进行排序。

sn-p：

$(".colzone").sortable({
  connectWith: ".colzone",
  update: function(event, ui) {},
  placeholder: "dashed2"
});

$(".dropzone").sortable({
  connectWith: ".dropzone",
  update: function(event, ui) {},
  placeholder: "dashed"
});

.colzone {
  margin: 10px;
  border: green 2px solid;
  height: 100%;
  background-color: #eeeeee;
}

.colpick {
  background-color: orange;
  border: yellow 2px solid;
  cursor: pointer;
}

.dropzone {
  margin: 10px;
  border: red 2px solid;
  width: 100px;
  height: 250px;
  background-color: #ededed;
}

.grid-users {
  background: #f5f5f5;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 0px;
  cursor: move;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.dashed {
  border: 2px dashed #999;
  background: #ede8e8;
  height: 35px;
}

.dashed2 {
  border: 2px dashed #999;
  background: #ede8e8;
  height: 295px;
  width: 140px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<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"></script>

<div class="container">
  <div class="colzone row">

    <!-- COLUMN 1 -->
    <div class="colpick">
      <div style="text-align: center; font-weight: bold;">
        COLUMN 1
      </div>
      <div class="dropzone">
        <div id="team-1" class="grid-users">TEAM 1</div>
        <div id="team-2" class="grid-users">TEAM 2</div>
        <div id="team-3" class="grid-users">TEAM 3</div>
        <div id="team-4" class="grid-users">TEAM 4</div>
      </div>
    </div>

    <!-- COLUMN 2 -->
    <div class="colpick">
      <div style="text-align: center; font-weight: bold;">
        COLUMN 2
      </div>
      <div class="dropzone">
        <div id="team-5" class="grid-users">TEAM 5</div>
        <div id="team-6" class="grid-users">TEAM 6</div>
      </div>
    </div>

    <!-- COLUMN 3 -->
    <div class="colpick">
      <div style="text-align: center; font-weight: bold;">
        COLUMN 3
      </div>
      <div class="dropzone"></div>
    </div>

  </div>
</div>