JS реализует перетаскивание блоков div и меняет позиции.
JS реализует перетаскивание блоков div и меняет позиции.

В основном перетаскивание HTML5 (перетаскивание)

Пример (нет необходимости устанавливать идентификатор для div):

Язык кода:javascript
копировать
<!DOCTYPE HTML>  
<html>  
<head>  
 
<script type="text/javascript">  
function allowDrop(ev)  
{  
ev.preventDefault();  
}  
  
var srcdiv = null;  
function drag(ev,divdom)  
{  
srcdiv=divdom;  
ev.dataTransfer.setData("text/html",divdom.innerHTML);  
}  
  
function drop(ev,divdom)  
{  
ev.preventDefault();  
if(srcdiv != divdom){  
srcdiv.innerHTML = divdom.innerHTML;  
divdom.innerHTML=ev.dataTransfer.getData("text/html");  
}  
}  
</script>  
</head>  
<body>  
  
<div style="width: 50px;height:50px;"  οndrοp="drop(event,this)" οndragοver="allowDrop(event)" draggable="true" οndragstart="drag(event, this)">  
  div1! 
</div>  
<div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)" draggable="true" οndragstart="drag(event, this)">  
div2!  
</div>  
<div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)" draggable="true" οndragstart="drag(event, this)">  
div3  
</div>
  
</body>  
</html>

Знакомство с вышеуказанными функциями:

  1. ondrop: при размещении перетаскиваемых данных произойдет событие drop. Здесь настраивается функция drop(event,this) и происходит обмен двумя внутренними HTML-файлами.
  2. ondragover: при перетаскивании элементов, таких как ссылки, которые имеют события по умолчанию, используйте ev.preventDefault() в событии ondragover, чтобы предотвратить событие по умолчанию. В противном случае событие drop не сработает.
  3. перетаскиваемый: позволяет перетаскивать.
  4. ondragstart: определяет, что происходит при перетаскивании элемента. В приведенном выше примере атрибут ondragstart вызывает функцию перетаскивания (событие), которая определяет данные, которые необходимо перетащить. Метод dataTransfer.setData() устанавливает тип данных и значение перетаскиваемых данных.
boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода
©