Javascript-форум - Поиск плагина или решения

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Поиск плагина или решения (https://javascript.ru/forum/jquery/81327-poisk-plagina-ili-resheniya.html)

Поиск плагина или решения

Привет.
Может встречали какой лучший плагин из типа - dual list box plugins.
Есть фиксированное число элементов. Они находятся в Двух списках.
Списки эти - типа Активные элементы и Скрытые.
Нужно перетягивать элементы из одного в другой.
И чтобы перетягивать в нужную позицию.
Т.е. 2 цели, выбрать в одном из списков активные и порядок им задать.
Вот как этот, только он у меня глючил увы

Может это просто можно два дива и sortable элементы сделать чтобы и туда и туда переносило? Вроде раньше встречал что просто получилось так сделать

Цитата:

Сообщение от micscr

Может это просто можно два дива и sortable элементы сделать чтобы и туда и туда переносило?

:yes: искать надо, было где-то тут.

У более конкретных решений есть все-таки преимущество в том что они ещё часто дают кнопку для переноса текущего выбранного в другой список.
Не лишнее, из опыта..

sortable перенос между блоков

Цитата:

Сообщение от micscr

часто дают кнопку для переноса

таскать за синий кружок.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body, html{
  width: 100%;
  height: 100%;
  margin: 0;
}
.block {
   width: 100%;height: 100%;
   display: flex;
   flex-wrap: wrap;

}
.block > div {
   height: 50%;
   transition: .8s;
   box-sizing: border-box;
}


.block > div:nth-child(1){ width: 100%;
  background-color: red;

}
.block > div:nth-child(2){ width: 50%;
  background-color: yellow;
}
.block > div:nth-child(3){ width: 50%;
  background-color: green;
}

.text{
  position: relative;
  width: 100px;
  height:  auto;
  background-color:  rgba(255, 244, 148, 1);
  border: 4px solid rgba(139, 69, 19, 1);
  border-radius: 12px;
  margin: 5px;padding: 5px;
}



 .handle{
   position: absolute;
    bottom: 0px;
    right: 0px;
   display: inline-block;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background-color: rgba(0, 0, 255, 1);
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
$(function() {
   $( ".block >" ).sortable({
      connectWith: ".block >",  handle : ".handle"
    });
})
  </script>
</head>

<body>
<div class="block">
  <div>
  <div class="text" ><div class="edit" contenteditable >test_01</div><span class="handle"></span></div>
  <div class="text" ><div class="edit" contenteditable >test_02</div><span class="handle"></span></div>
  <div class="text" ><div class="edit" contenteditable >test_03</div><span class="handle"></span></div>
  </div>
  <div>
  <div class="text" ><div class="edit" contenteditable >test_04</div><span class="handle"></span></div>
  <div class="text" ><div class="edit" contenteditable >test_05</div><span class="handle"></span></div>
  <div class="text" ><div class="edit" contenteditable >test_06</div><span class="handle"></span></div>
  </div>
  <div>
  <div class="text" ><div class="edit" contenteditable >test_07</div><span class="handle"></span></div>
  <div class="text" ><div class="edit" contenteditable >test_08</div><span class="handle"></span></div>
  <div class="text" ><div class="edit" contenteditable >test_09</div><span class="handle"></span></div>
  </div>
</div>



</body>
</html>

Спасибо.
Тоже как вариант