jquery droppable/html5 api - how to make element droppable and draggable

Question

i know how to make an emelent that is draggable and can be dropped at some dropzone but how can I make this droppable element draggable also in another dropzone? So lets image I have a container that is droppable and here I can move elements around (vertically lets say) and additionaly i can drop some element into these daggable elements and move them around inside em. Is it possble?

Answer 1

You can use a class as a container where you draggable and/or sortable div element can be sorted or dropped.

You then can duplicate that class, for example class dropzone. This way the element can be dragged from the one div to the other, and you can sort them.

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>