Question

我知道如何制作可拖动的并且可以在某个放置区放置的润肤剂，但是如何使该可放置元素在另一个放置区也可拖动？因此，让image我有一个可放置的容器，在这里我可以移动元素（垂直说），另外，我可以将一些元素放到这些可拖动的元素中并在em内部移动。可以吗？

Answer 1

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

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

代码段：

$(".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>

jQuery droppable / html5 API-如何使元素可放置和可拖动

1 个答案: