Перетаскивание - очень крутая вещь. Вы нажимаете на объект, удерживаете мышь, перемещаете мышь в другую область и отпускаете кнопку мыши, чтобы разместить объект здесь.
Вот простой случай:
HTML Part: Обратите внимание, что перетаскивающие элементы должны быть определены абсолютно, то есть положением = абсолютно;
Копия кода выглядит следующим образом: <div style = "Положение: абсолют; высота: 100px; ширина: 100px; фон: красный"> </div>
<script src = "Dome.js"> </script>
JS Part (Dome.js):
var EventUtil = {// Получить событие и Target getEvent: function (event) {return Event? Событие: window.event; }, getTarget: function (event) {return event.target || Event.srcelement; }, // Добавить событие прослушивания addEvent: function (element, type, handler) {if (element.addeventlistener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.attachevent ("on" + type, Handler); }}, // Выберите событие прослушивания DeLevent: function (element, type, Handler) {if (element.RemoveEventListener) {element.RemoveEventListener (type, Handler, false); } else if (element.detachevent) {element.detachevent ("on" + type, Handler); }}} var Dragdrop = function () {// Флаг, чтобы определить, перетаскивается ли элемент DOM var draging = null; // Разница между верхним левым углом элемента DOM и указателем мыши составляет diffx = 0; diffy = 0; функция handleevent (event) {event = eventutil.getevent (event); var target = eventutil.getTarget (event); switch (event.type) {case "mousedown": // определить, содержит ли класс элемента DOM атрибут Draggable if (target.classname.indexof ("Draggable")> -1) {Draging = target; diffx = event.clientx - target.offsetleft; diffy = event.clienty - target.offsettop; } перерыв; case "MouseMove": if (перетаскивание! = null) {target.style.left = event.clientx - diffx + "px"; target.style.top = event.clienty - diffy + "px"; } перерыв; Case "MouseUp": перетаскивание = null; перерыв; }} return {enable: function () {eventutil.addevent (документ, "mousedown", handleevent); Eventutil.Addevent (документ, "MouseMove", HandleEvent); Eventutil.Addevent (документ, «MouseUp», HandleEvent); }, disable: function () {eventutil.delevent (документ, "mousedown", handleevent); Eventutil.Delevent (документ, "MouseMove", HandleEvent); EventUtil.Delevent (документ, «MouseUp», HarderEvent); }}} (); Dragdrop.enable ();Здесь нужно объяснить Diffx и Diffy, которые представляют разницу между верхним левым углом элемента и указателем мыши.
Diffx = x координата мыши - Offsetleft элемента объекта
Diffy = y координата мыши - OffsetTotop объекта элемента
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.