Как сохранить результат Drag and Drop?

@Kazer · Регистрация: 03.02.2018

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

CSS
1
2
3
4
5
6
7
8
 .mydiv {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

HTML5
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
<!DOCTYPE HTML>
<html>
<head>
 <style>
 
 
 </style>
 
</head>
<body>
 
 
<h2>Drag and Drop</h2>
 
 
<div id="div1" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
 
 
<div id="div3" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script> 
function allowDrop(ev) {
    ev.preventDefault();
}
 
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
 
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

Как сохранить в базу данных данные, которые перетащил в другой блок ? ну к примеру был текст (ну в нашем случае картинка) и мы его перенесли в последний блок и как сохранить эту информацию ? просто в проекте из 10 карточек перетаскиваешь 3 и надо сохранить какие карточки перетащил в три пустых блока . как это сделать ? заранее спасибо

Qwerty_Wasd · 13.07.2019, 12:52

Kazer, Вам именно в базе нужно сохранить? Или storage's тоже пойдут?

@Kazer · 13.07.2019, 18:34 **[ТС]**

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

Kazer, Вам именно в базе нужно сохранить? Или storage's тоже пойдут?

Вообще в базе , так как потом надо всё сохранить в pdf и тд. Но вообще я понял , что хотя бы как то надо было бы для начала. storage тоже сойдет. Если можете , помогите , пожалуйста. Заранее спасибо. Желательно конечно база

Qwerty_Wasd · 13.07.2019, 21:32

Kazer,
как вариант с localStorage - https://codepen.io/qwerty_wasd/pen/wLbGbM

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="module-dnd-saved">
  <div class="puzzle-fields">
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/858585/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/de688e/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/6876de/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/68cade/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/68dea1/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/76de68/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/c6de68/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/dec368/000000.png" alt=""/></div>
    <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/de8668/000000.png" alt=""/></div>
  </div>
  <div class="puzzle-fields">
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
    <div class="item" draggable="true"></div>
  </div>
</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
29
30
31
32
33
34
35
36
37
38
39
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
body {
  padding-top: 50px;
  text-align: center;
}
 
[draggable] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
 
.puzzle-fields {
  border: 2px solid red;
  display: inline-flex;
  flex-flow: row wrap;
  width: calc(3 * 104px + 4px);
  cursor: pointer;
}
.puzzle-fields .item {
  border: 2px solid #000000;
  display: inline-block;
  width: 104px;
  height: 104px;
}

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
let opDnD = {
  buff: null,
  items: document.getElementsByClassName(`item`),
  events: {
    beforeunload: () => window.localStorage.setItem(`key123456789`, Array.from(opDnD.items, elem => elem.innerHTML).join`;`),
    load: () => window.localStorage.getItem(`key123456789`) ?
    window.localStorage.getItem(`key123456789`).split`;`.forEach((v, i) => opDnD.items[i].innerHTML = v) : void 0,
    dragstart: e => {
      opDnD.buff = e.currentTarget;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', e.currentTarget.innerHTML);
    },
    dragover: e => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
    },
    drop: e => {
      opDnD.buff.innerHTML = e.currentTarget.innerHTML;
      e.currentTarget.innerHTML = e.dataTransfer.getData('text/html');
    },
  },
};
//console.log(Array.from(opDnD.items, elem => elem.innerHTML).join`;`);
[`beforeunload`, `load`].forEach(evt => window.addEventListener(evt, opDnD.events[evt]));
Array.from(opDnD.items, elem => {
  [`dragstart`, `dragover`, `drop`].forEach(evt => elem.addEventListener(evt, opDnD.events[evt]));
});

В случае же с БД - вместо обращения к сторажу, Вы формируете запрос на сервер, передавая к примеру все содержимое узла #module-dnd-saved обработчику на PHP, тот в свою очередь запишет в БД, а при загрузке страницы опять запрос, чтобы получить сохраненное ранее содержимое.

@Kazer · 13.07.2019, 23:36 **[ТС]**

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

В случае же с БД - вместо обращения к сторажу, Вы формируете запрос на сервер, передавая к примеру все содержимое узла #module-dnd-saved обработчику на PHP, тот в свою очередь запишет в БД, а при загрузке страницы опять запрос, чтобы получить сохраненное ранее содержимое.

1. Как можно убедится на 100% , что сохранено в сторадже?
2. Я не могу всё содержимое кинуть, так как тогда и первый puzzle fields туда закинется, разве нет ?

Я просто с таким не сталкивался и немного недопонимаю ... извините , если что

@Kazer · 13.07.2019, 23:59 **[ТС]**

Просто я не понимаю где тут написано , что сохранены именно те три данные

@Kazer · 14.07.2019, 00:41 **[ТС]**

Мне просто пофигу что происходит после перезагрузки, мне главное сохранить ту информацию , что я перенёс

Qwerty_Wasd · 14.07.2019, 09:53

Kazer,

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

мне главное сохранить ту информацию , что я перенёс

выходит я не правильно Вас понял. Загляните обратно в песочницу - переделал, смотрите в консоль при дропе.

@Kazer · 14.07.2019, 13:51 **[ТС]**

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

выходит я не правильно Вас понял. Загляните обратно в песочницу - переделал, смотрите в консоль при дропе.

да ,вижу, спасибо. и теперь я могу спокойно закинуть этот array в базу ?

Qwerty_Wasd · 14.07.2019, 14:46

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

теперь я могу спокойно закинуть этот array в базу

Вы комментарий в коде видели?

@Kazer · 15.07.2019, 13:17 **[ТС]**

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

Вы комментарий в коде видели?

Да , но на всякий случай переспросил , чтоб убедиться

Добавлено через 3 часа 6 минут
Просто проблема такая , что делая запрос

JavaScript
1
2
3
4
5
6
7
8
9
fetch('category.php', {
                method: 'POST', // или 'PUT'
                body: JSON.stringify(myJsonString), // data может быть типа `string` или {object}!
                headers:{
                    'Content-Type': 'application/json'
                }
                }).then(res => res.json())
                .then(response => console.log('Успех:', JSON.stringify(response)))
                .catch(error => console.error('Ошибка:', error));

в консоли выводится ошибка 404 по поводу , что category.php нету , хотя файл есть.

Добавлено через 14 минут
Я все действия делаю на category.php. и можно ли вообще урл запроса делать на этот же файл ?

Добавлено через 36 минут
сейчас я на вот этой странице http://localhost/wordpress.game/category/XXX/XXX/?

Всё делается в category.php

@Kazer · 16.07.2019, 14:27 **[ТС]**

Всё, вопрос решён

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника 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 существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	13.07.2019, 12:52
	Kazer, Вам именно в базе нужно сохранить? Или storage's тоже пойдут? 0

@Kazer 0 / 0 / 0 Регистрация: 03.02.2018 Сообщений: 285
	13.07.2019, 23:59 [ТС]
	Просто я не понимаю где тут написано , что сохранены именно те три данные Миниатюры 0

@Kazer 0 / 0 / 0 Регистрация: 03.02.2018 Сообщений: 285
	14.07.2019, 00:41 [ТС]
	Мне просто пофигу что происходит после перезагрузки, мне главное сохранить ту информацию , что я перенёс 0

@Kazer 0 / 0 / 0 Регистрация: 03.02.2018 Сообщений: 285
	16.07.2019, 14:27 [ТС]
	Всё, вопрос решён 0

Как сохранить результат Drag and Drop?

Решение