Простое перетаскивание JavaScript без помощи библиотеки

Question

Я просто ищу способ использования перетаскивания без jquery или любой другой библиотеки. Если перетаскиваемый объект отбрасывается на другой элемент, более поздний элемент должен начинать событие (в FF - лучше бы не зависеть от браузера).

Я знаю, что перетаскивание для JavaScript иногда обсуждалось ранее, но предыдущие публикации мне не помогли.

Хотя я нашел несколько примеров, мне не ясно, существуют ли события "drop" или "dragdrop", но эти вещи не работают:

<p ondrop='alert("It worked");'>Text</p>
<p ondragdrop='alert("It worked");'>Text</p>

Как это можно сделать?

Большое спасибо заранее.

Answer 1

Я согласен с другими ответами. Библиотека сэкономит вам много времени и головной боли. Это от кого-то, кто только недавно создал элемент управления перетаскиванием с нуля.

Если вы настаиваете на том, что вам нужно сделать следующее:

1. Свяжите событие onmousedown с div, который вы хотите перетащить (div.onmousedown).
2. Изменить стиль позиции div на абсолютный (div.style.position = 'absolute')
3. Начало захвата движения мыши (document.onmousemove).
4. При перемещении мыши обновите позицию div (div.style.top | left = '[location] px')
5. В случае события onmouseup div (или документа) отсоедините все обработчики и выполните любую другую очистку (изменение позиции обнуления и т. Д.).

Некоторые проблемы, которые, вероятно, решит библиотека:

1. При перетаскивании вы выделите текст на странице (выглядит некрасиво).
2. Привязка к событиям в разных браузерах различна.
3. Вы должны рассчитать размер перетаскиваемого элемента, если хотите показать заполнители и сделать так, чтобы он не «всплывал», когда вы начинаете перетаскивать элемент управления (поскольку переход к абсолютному позиционированию приведет к удалению элемента из потока).
4. Возможно, вы захотите, чтобы перетаскиваемый элемент плавно перемещался, поэтому вам придется сохранять некоторое смещение мыши при выборе элемента или автоматически центрировать элемент по отношению к мыши.
5. Если вы хотите перетащить элемент в список, вам придется написать еще несколько пользовательских кодов для этого списка, чтобы принять перетаскиваемый элемент.
6. Вам нужно будет учитывать перетаскивание при прокрутке окна и, возможно, перетаскивание внутри других элементов, которые расположены странным образом.

Answer 2

Я просто ищу способ использования перетаскивания без jquery или какой-либо другой библиотеки.

Извините, но нет такой вещи, как просто перетаскивание без какой-либо библиотеки. Вы можете написать все это самостоятельно, но JS будет достаточно, чтобы он работал во всех браузерах.

Answer 3

Хм. Вероятно, не так просто, что вы захотите сделать это сами, но я бы посмотрел на FORV Javascript библиотеки перетаскивания Питера Мишо - в отличие от JQuery или всех этих больших библиотек, модули FORK отделены от каждого другие, и достаточно просты, чтобы вы могли, вероятно, взглянуть на исходный код Питера и выяснить, какие биты вам нужны. (редактировать: я бы просто использовал FORK.Drag, поскольку он очень маленький: всего 7,6 КБ минимизировано)

Answer 4

Хотя я согласен с тем, что библиотека - это то, что вам нужно, ответ на этот вопрос - «mmownown, onmousemove, onmouseup». Вы должны обработать эти три события.

В onmousedown вы найдете цель (event.target или похожую в разных браузерах) и установите draggedObject = event.target. Вы также начали бы обрабатывать событие onmousemove.

Всякий раз, когда срабатывает событие onmousemove, вы перемещаете перетаскиваемый элемент на основе разницы в положении с момента последнего запуска события onmousemove.

В событии onmouseup вы очистите переменную draggedObject и прекратите обработку onmousemove.

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