jquery droppable / html5 api - como tornar o elemento soltável e arrastável

Faker22

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?

Crezzur

Você pode usar uma classe como um contêiner onde o elemento arrastável e / ou classificável divpode 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.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como podemos tornar o elemento arrastável e soltável se já estiver no contêiner?

O HTML arrastável e soltável da IU do JQuery foi corrompido após vários arrastar e soltar

Como tornar o elemento DOM arrastável no aplicativo SAPUI5?

Como anexar li arrastado em ui soltável usando arrastável e soltável em jQuery UI?

Como fazer um elemento arrastável permanecer na nova posição quando solto (HTML5 não jQuery)?

como usar JQuery para inserir depois e anexar usando arrastável e soltável?

Como anexar <li> a <ul> usando arrastável e soltável?

jQuery UI (droppable): elemento arrastável não colocado no ponteiro do mouse se droppable tem posição css relativa / absoluta

Diretiva Angularjs para tornar o elemento HTML arrastável e os campos HTML dentro dele selecionáveis ou modificáveis

Adicionando uma classe a um item soltável dentro do jQuery arrastável e soltável

tornar o elemento arrastável no Yii2

Elemento jQuery arrastável

mxgraph como tornar a borda soltável e inserir um novo vértice entre a origem e o destino

Arrastável / Soltável: Não é possível ler dados atualizados- * no elemento arrastável no evento soltar

HTML5 arrastável mudando a posição de áreas soltáveis

problema com arrastável e soltável

Como tornar o menu suspenso do bootstrap arrastável?

Como corrigir a proporção de aspecto de um elemento arrastável e redimensionável?

Como tornar um elemento visível dentro de uma sobreposição? HTML e CSS

Como tornar uma imagem na tela fixa, não arrastável e não selecionável usando fabricjs

Como tornar o elemento HTML redimensionável usando Javascript puro?

Como tornar o elemento <noscript> acessível?

Div arrastável com jQuery, como aplicar o deslocamento clicado do elemento?

Como tornar objetos arrastáveis e soltáveis

Como tornar um folheto circleMarker arrastável?

Como consertar o 'elemento arrastável do mouse segure'

Tornar o bootstrap modal arrastável e manter o segundo plano utilizável

O auxiliar arrastável JQuery UI não pode ser arrastado para filhos soltáveis

Como tornar o conteúdo editável para o elemento filho usando JQuery

TOP lista

quentelabel

Arquivo