Вопросы по оформлению drag'n'drop ??

Question

[Danila232]

Сделал простенький драг-дроп, есть вопросы:
1) При перетаскивании элемента он становится полупрозрачным. Вроде это дефолтное поведение для картинок и элементов с draggable="true". Но выглядит это конечно так себе. Можно как-то сделать, чтобы при захвате элемента он оставался самим собой, не становился тусклым?

2) Поставил элементу cursor: pointer, но при его захвате и наведении на Целевую зону у курсора появляется плюсик. Можно как то изменить?

Если обе эти вещи никак не изменить, есть какой-то ещё способ делать drag/drop по другому?

Код: https://codepen.io/Vegan-AK/pen/NWoJZgR

Comments

[Kentavr16]

Насколько я понимаю - только через preventDefault и написание собственной логики перетаскивания.

[Danila232]

Kentavr16, а можете скинуть ссылки на описание таких логик? Статьи, ютуб. А то я искал, не нашёл, почти у всех это было через стандартные drag/drop свойства

[Kentavr16]

Danila232, для начала начни отмечать решенные вопросы.

[Sergey В.]

Перетаскиваю с помощью jquery ui https://jqueryui.com/draggable/#constrain-movement
Элементы полупрозрачными не становятся.

Answer 1

[Kentavr16]

Я сейчас изложу свое понимание - не сверялся со справочниками и никогда не заморачивался по этому поводу, так что могу ошибаться.
У браузера есть встроенная логика обращения с перетаскиваемыми элементами. Потаскай любую катринку на любом сайте - она потащится. Так же как ссылки, к примеру. Для кастомизации такого рода событий есть event,preventDefault. Ты так отменяешь встроенное действие, а поверх события для этого действия пишешь свою логику. Вот пример. Сгенерирован нейросетью, мне лень дорабатывать. Но логика вполне ясна. Отменил - написал свое. Так что при перетягивании можешь делать абсолютно что угодно.
П.С. - может есть способ переопределить и стандартное поведение браузера при перетаскивании, но я такого никогда не видел.

Comments

[ksnk]

Тоесть основной совет - берешь родной драг & дроп и отменяешь его к фигам ? ))) Не, я тоже примерно в том направлении делаю, но сам совет выглядит как-то нетехнологично, согласись, где-то гуглхром что-то делает не то...

[Kentavr16]

ksnk, ты хотел написать "делает не то что мне хотелось бы"? Это да. А что удивляет? Не нравится по умолчанию? Пишешь новое. Если не удалось написать через css-пишешь через скрипты.
Можно поискать ещё вебкиты на этот случай, но не думаю что такое есть ,по причине невостребованности .

[Kentavr16]

ksnk, и что удивительного в отмене? При сабмите форм вон в 90 процентах случаев отменяют дефолтное поведение ради удобства - и ничего. Контекстное меню ооочень часто свое пишут (опять отмена). Это не значит что разработчики браузера дураки или упустили что-то. Есть скрипты, вот и дописывай поведение.

Answer 2

[Юрий]

через эту библиотеку можно сделать разные перетаскивания, не только сортировку. можно перетаскивать меджу разными группами. я даже древовидную структуру на ней делал
https://github.com/SortableJS/Sortable