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

Ссылка скопирована
JavaScript
5 января 2026 1 ответ

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

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

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

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

Дополнительно:

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

  • Kentavr16, а можете скинуть ссылки на описание таких логик? Статьи, ютуб. А то я искал, не нашёл, почти у всех это было через стандартные drag/drop свойства
  • Danila232, для начала начни отмечать решенные вопросы.
  • Перетаскиваю с помощью jquery ui https://jqueryui.com/draggable/#constrain-movement
    Элементы полупрозрачными не становятся.

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

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

    Ответы:

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

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Кирилл JS Ответ

    Для реализации drag'n'drop на веб-странице можно использовать HTML5 Drag and Drop API. Вот пример простой реализации drag'n'drop с помощью JavaScript:

    1. Начнем с HTML разметки, где у нас будет два элемента - элемент, который мы будем перетаскивать, и область, куда мы будем его перетаскивать:

    <div id="dragElement">Перетащите меня</div>
<div id="dropZone">Сюда перетащите</div>

    <div id="dragElement">Перетащите меня</div> <div id="dropZone">Сюда перетащите</div>

    2. Далее, добавим JavaScript код, который будет обрабатывать события drag'n'drop:

    // Получаем элементы
var dragElement = document.getElementById('dragElement');
var dropZone = document.getElementById('dropZone');
 
// Обрабатываем событие начала перетаскивания
dragElement.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text', e.target.id);
});
 
// Обрабатываем событие окончания перетаскивания
dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData('text');
  var draggedElement = document.getElementById(data);
  dropZone.appendChild(draggedElement);
});
 
// Обрабатываем событие перетаскивания над зоной
dropZone.addEventListener('dragover', function(e) {
  e.preventDefault();
});

    // Получаем элементы var dragElement = document.getElementById('dragElement'); var dropZone = document.getElementById('dropZone'); // Обрабатываем событие начала перетаскивания dragElement.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text', e.target.id); }); // Обрабатываем событие окончания перетаскивания dropZone.addEventListener('drop', function(e) { e.preventDefault(); var data = e.dataTransfer.getData('text'); var draggedElement = document.getElementById(data); dropZone.appendChild(draggedElement); }); // Обрабатываем событие перетаскивания над зоной dropZone.addEventListener('dragover', function(e) { e.preventDefault(); });

    3. Теперь у нас есть простая реализация drag'n'drop на веб-странице. При перетаскивании элемента "Перетащите меня" в область "Сюда перетащите", элемент будет перемещен в эту область.

    Это только базовый пример, и вы можете доработать его, добавив стилизацию, дополнительные функции и т.д. Надеюсь, это поможет вам реализовать drag'n'drop на вашем сайте!

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    CSS Как реализовать table на основе grid? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ