Drag&drop и список

@Swaer · Регистрация: 13.06.2013

Студворк — интернет-сервис помощи студентам

https://codepen.io/Swaer/pen/xJGdPZ не знаю как перетаскивать в другой блок элементы списка, если один элемент, я его легко могу перемещать между блоками, а вот разные элементы списка не получается

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="block">
    <li draggable="true">111111111111</li>
    <li draggable="true">222222222222</li>
    <li draggable="true">33333333333333</li>
    <li draggable="true">444444444444</li>
  
</div>
 
<div class="block">
  
    <li draggable="true">555555555555</li>
    <li draggable="true">666666666666</li>
    <li draggable="true">7777777777777</li>
    <li draggable="true">888888888888</li>
  
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.block {
  border:3px solid green;
}
 
li {
  font-size: 30px;
  list-style: none;
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  width: 300px;
}
body {
  display: flex;
  transition-duration: 3s;
}
.none {
  display: none;
}
 
.hovered {
  border-style: dashed;
  background-color: #f4f4f4;
}
 
.invis {
  display:none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let li = document.querySelectorAll('li');
let blocks = document.querySelectorAll('.block');
for( let block of blocks){
  block.addEventListener('dragover', dragOver);
  block.addEventListener('dragenter', dragEnter);
  block.addEventListener('dragleave', dragLeave);
  block.addEventListener('drop', dragDrop);
}
 
function dragOver(e){
  e.preventDefault();
}
function dragEnter(e){
   e.preventDefault();
  this.className += ' hovered'
}
function dragLeave(){
  this.className = 'block'
}
function dragDrop(){
  this.append(li)
}
 
for( let i = 0; i < li.length; i++){
  li[i].addEventListener('dragstart', dragStart);
  li[i].addEventListener('dragend', dragEnd);
}
 
function dragStart(){
  let that = this;
  setTimeout(function(){that.className = 'invis'},0)
}
 
function dragEnd(){
  this.classList = '';
}

@Evgen1337 · 18.07.2018, 21:47

там и нужен target
вроде было нужно из одного удалить, в другом создать

@Omion · 20.07.2018, 12:08

В своё время разбирался с библиотекой jq драг дроп. Пришел к выводу, между блоками для перемещения нужно просто удалять в одном месте и создавать в другом.
В моей версии логика такая:
- читаю элемент который беру, откуда беру.
- читаю над кем опускаю элемент.
- удаляю из места откуда взял.
- создаю в элементе в котором бросил.
!!! если увеличить вложенность будут проблемы(у меня были)

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	18.07.2018, 21:47
	там и нужен target вроде было нужно из одного удалить, в другом создать 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	20.07.2018, 12:08
	В своё время разбирался с библиотекой jq драг дроп. Пришел к выводу, между блоками для перемещения нужно просто удалять в одном месте и создавать в другом. В моей версии логика такая: - читаю элемент который беру, откуда беру. - читаю над кем опускаю элемент. - удаляю из места откуда взял. - создаю в элементе в котором бросил. !!! если увеличить вложенность будут проблемы(у меня были) 0