问题描述
我知道如何制作可拖动的并且可以在某个放置区放置的润肤剂,但是如何使该可放置元素在另一个放置区也可拖动?因此,让image我有一个可放置的容器,在这里我可以移动元素(垂直说),另外,我可以将一些元素放到这些可拖动的元素中并在em内部移动。可以吗?
解决方法
您可以将类用作容器,在其中可以对可拖动和/或可排序的div
元素进行排序或删除。
然后您可以复制该类,例如,类dropzone
。这样,可以将元素从一个div拖动到另一个div,然后可以对其进行排序。
代码段:
$(".colzone").sortable({
connectWith: ".colzone",update: function(event,ui) {},placeholder: "dashed2"
});
$(".dropzone").sortable({
connectWith: ".dropzone",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>