Eu sei como fazer um emelent que é arrastável e pode ser solto em alguma zona de soltar, mas como posso fazer este elemento soltar arrastável também em outra zona de soltar? Então vamos imaginar, eu tenho um contêiner que pode ser solto e aqui posso mover elementos (digamos verticalmente) e, adicionalmente, posso soltar algum elemento nesses elementos daggable e movê-los dentro deles. É possível?
Você pode usar uma classe como um contêiner onde o elemento arrastável e / ou classificável div
pode ser classificado ou solto.
Em seguida, você pode duplicar essa classe, por exemplo, classe dropzone
. Desta forma, o elemento pode ser arrastado de um div para o outro, e você pode classificá-los.
snippet:
$(".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>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras