Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2020, 10:54
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,488

Поиск плагина или решения
Привет.
Может встречали какой лучший плагин из типа - dual list box plugins.
Есть фиксированное число элементов. Они находятся в Двух списках.
Списки эти - типа Активные элементы и Скрытые.
Нужно перетягивать элементы из одного в другой.
И чтобы перетягивать в нужную позицию.
Т.е. 2 цели, выбрать в одном из списков активные и порядок им задать.
Вот как этот, только он у меня глючил увы
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2020, 11:01
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,488

Может это просто можно два дива и sortable элементы сделать чтобы и туда и туда переносило? Вроде раньше встречал что просто получилось так сделать
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2020, 11:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

Сообщение от micscr
Может это просто можно два дива и sortable элементы сделать чтобы и туда и туда переносило?
искать надо, было где-то тут.
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2020, 11:22
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,488

У более конкретных решений есть все-таки преимущество в том что они ещё часто дают кнопку для переноса текущего выбранного в другой список.
Не лишнее, из опыта..
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2020, 14:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

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>
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2020, 15:03
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,488

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как организовать поиск по csv на js Vlad777 Общие вопросы Javascript 2 03.03.2018 12:35
как добавить ИЛИ внутрь селктора атрибута? sovsem-nub (X)HTML/CSS 3 18.12.2016 13:57
В зависимости от referrer выводить рекламу adsene или зорьки wlad2 Общие вопросы Javascript 12 19.12.2010 01:02
PagingToolbar и поиск DenQ ExtJS 5 02.11.2010 00:16
Сторонние библиотеки - быть или не быть? IIIEPJIOK Оффтопик 64 21.03.2009 19:39