Javascript.RU

Drag and drop

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/drag-and-drop.

В свое время приходилось реализовывать кучу drag and drop'ов под самым разным соусом.

Эта статья представляет собой учебник-выжимку о том, как организовать drag'n'drop в javascript, начиная от основ и заканчивая готовым фреймворком.

Кроме того, почти все javascript-библиотеки реализуют drag and drop так, как написано (в статье дано несколько разных вариантов, не факт что ваш фреймворк использует лучший). Зная, что и как, вы сможете поправить и адаптировать существующую библиотеку под себя.

Drag'n'drop в свое время был замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.

Одно из самых очевидных применений drag'n'drop - переупорядочение данных. Это могут быть блоки, элементы списка, и вообще - любые DOM-элементы и их наборы.

Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через drag'n'drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.

Организовать перенос элементов по странице - довольно просто. Для этого нужно:

  1. При помощи события mouseDown отследить клик на переносимом элементе
  2. При каждом движении мыши в обработчике события mouseMove передвигать переносимый элемент по странице.
  3. При отпускании кнопки мыши, то есть наступлении события mouseUp - остановить перенос элемента и произвести все действия, связанные с окончанием drag and drop.

При обработке событий, связанных с мышью, нужен кроссбраузерный способ получения координат курсора из события в обработчике. Кроме того, необходимо знать нажатую кнопку мыши.

Для этого будем использовать свойства which и pageX/pageY, полное описание и механизмы кросс-браузерной реализации которых есть в статье по свойствам объекта событие.

which
кнопка мыши - 1: левая, 2: средняя, 3: правая
pageX/pageY
координаты курсора относительно верхнего-левого угла документа (с учетом прокрутки)

Кроссбраузерно ставить эти свойства на объект будет функция fixEvent (по статье свойства объекта событие):

function fixEvent(e) {
	// получить объект событие для IE
	e = e || window.event

	// добавить pageX/pageY для IE
	if ( e.pageX == null && e.clientX != null ) {
		var html = document.documentElement
		var body = document.body
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

	// добавить which для IE
	if (!e.which && e.button) {
		e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
	}

	return e
}

В этом коде e.which проходит кросс-браузерную обработку, чтобы корректно отражать нажатую кнопку мыши. Вы можете подробно прочитать об этом в статье Свойства объекта событие.

На демке ниже обработчик mouseMove отслеживает координаты курсора мыши относительно левого-верхнего угла страницы, используя кроссбраузерную обертку fixEvent.

document.onmousemove = mouseMove

function mouseMove(event){ 
	event = fixEvent(event)
	document.getElementById('mouseX').value = event.pageX
	document.getElementById('mouseY').value = event.pageY
}

Координата X:
Координата Y:

Чтобы начать перенос элемента, мы должны отловить нажатие кнопки мыши на объекте.

Для этого нам пригодится событие mousedown. Повесим обработчик на те элементы, которые хотим сделать доступными для переноса.

Пока этот обработчик будет запоминать объект в глобальной переменной dragObject

element.onmousedown = function(e){
    // запомнить переносимый объект 
    // в переменной dragObject
    dragObject  = this

    // остановить обработку события
    return false
}

Остановить обработку события return false очень важно - иначе браузер может запустить свои механизмы перетаскивания элементов и все нам поломать.

В случае с отпусканием кнопки мыши все проще - объект мы уже знаем, так что можно повесить один обработчик onmouseup на document.

document.onmouseup = function() {
    // опустить переносимый объект
    dragObject = null
}

При нажатии на элемент он запоминается и выделяется.
Выделение(запоминание) действует на все время, когда нажата кнопка мыши, в том числе при перемещении курсора.


Нажми меня

Остается добавить визуальное перемещение элемента - и drag and drop заработает.

Оптимизация onmousedown

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

Тогда время инициализации можно сильно сократить, если назначать обработчик onmousedown не на каждый объект переноса, а на контейнер. И уже в самом обработчике по event.target определять, где произошел клик.

Перед дальнейшим развитием проведем реорганизацию кода.

Используем способ описания объекта без new (описан здесь как фабрика объектов), чтобы объявить объект dragMaster, предоставляющий необходимый функционал и отслеживающий перенос.

var dragMaster = (function() {
	// private методы и свойства
	var dragObject
	
	function mouseDown(e) {
		клик на переносимом элементе: начать перенос
	}

	function mouseMove(e){
		if (dragObject) {
			отобразить перенос объекта
		}
	}
		
	function mouseUp(e){
		if (dragObject) {
			конец переноса
		}
	}

	// public методы и свойства	
	return {
		init: function() {
			// инициализовать контроллер
			document.onmousemove = mouseMove
			document.onmouseup = mouseUp
		},
		
		makeDraggable: function(element){
			// сделать элемент переносимым
			element.onmousedown = mouseDown
		}
	}
	
}())

При таком способе задания объекта dragMaster получает публичные свойства (например, makeDraggable), которые имеют доступ к приватным переменным и методам mouse*, dragObject, так как являются вложенными функциями.

Полученный код:

  1. Не загрязняет глобальную область видимости переменными типа dragObject.
  2. Дает единый объект-синглтон dragMaster, управляющий переносом.
  3. Приватные переменные хорошо сжимаются javascript-компрессором, что убыстряет и уменьшает код.

Последний пункт очень важен, так как обработчики mouseMove, mouseUp вызываются при каждом передвижении мыши и поднятии кнопки соответственно. Если mouseMove будет работать медленно, то передвижение курсора станет рваным, заметно тормозным.

На это натыкались многие писатели drag'n'drop приложений. Мы же будем изначально закладывать производительность во все критические участки кода.

Для того, чтобы перенести элемент, ему нужно поставить значение CSS-свойства position в absolute. Тогда он будет позиционироваться относительно верхнего-левого угла документа (точнее говоря, относительно ближайшего родителя, у которого position - relative/absolute, но у нас таких нет), и установка CSS-свойств left и top в координаты курсора мыши поместит левый-верхний угол элемента непосредственно под указатель.


Вот так:

Для перемещения элемента нам достаточно всего-лишь обновлять значения left/top при каждом движении мыши mousemove!

Посетитель обычно кликает не в левый-верхний угол, а куда угодно на элементе.

Поэтому чтобы элемент не прилипал к курсору верхним-левым углом, к позиции элемента необходимо добавить смещение мыши на момент клика.

На рисунке ниже mouseX/mouseY - координаты курсора мыши, а positionX/positionY - координаты верхнего-левого угла элемента, которые легко получить из DOM:

Отсюда легко получаем смещение курсора мыши:

mouseOffsetX = mouseX - positionX
mouseOffsetY = mouseY - positionY

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

var mouseOffset

element.onmousedown = function(e) {
    e = fixEvent(e)
    ...
    var pos = getPosition(element)
    
    mouseOffset= { 
        x: e.pageX - pos.x, 
        y: e.pageY - pos.y 
    }
    ...
}

document.onmousemove = function(e) {
    e = fixEvent(e)
    ...
    element.style.left = e.pageX - mouseOffset.x + 'px'
    element.style.top = e.pageY - mouseOffset.y  + 'px'
    ...
}


Перенеси меня

Код контроллера:

var dragMaster = (function() {

	var dragObject
	var mouseOffset

	// получить сдвиг target относительно курсора мыши
	function getMouseOffset(target, e) {
		var docPos	= getPosition(target)
		return {x:e.pageX - docPos.x, y:e.pageY - docPos.y}
	}

	function mouseUp(){
		dragObject = null

		// очистить обработчики, т.к перенос закончен
		document.onmousemove = null
		document.onmouseup = null
		document.ondragstart = null
		document.body.onselectstart = null
	}

	function mouseMove(e){
		e = fixEvent(e)

		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}
		return false
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		dragObject  = this

		// получить сдвиг элемента относительно курсора мыши
		mouseOffset = getMouseOffset(this, e)

		// эти обработчики отслеживают процесс и окончание переноса
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp

		// отменить перенос и выделение текста при клике на тексте
		document.ondragstart = function() { return false }
		document.body.onselectstart = function() { return false }

		return false
	}

	return {
		makeDraggable: function(element){
			element.onmousedown = mouseDown
		}
	}

}())

function getPosition(e){
	var left = 0
	var top  = 0

	while (e.offsetParent){
		left += e.offsetLeft
		top  += e.offsetTop
		e	 = e.offsetParent
	}

	left += e.offsetLeft
	top  += e.offsetTop

	return {x:left, y:top}
}

В коде появилась новая функция getPosition(элемент) - она получает абсолютные координаты верхнего-правого угла элемента. Функция это стандартная и много где используемая.

Кроме того, при начале переноса останавливается выделение и перенос текста браузером:

document.ondragstart = function() { return false }
document.body.onselectstart = function() { return false }

Если этого не сделать, то движение курсора мыши при нажатой кнопке будет не только перемещать элемент, но и, например, выделять текст под собой (стандартная функция выделения текста на странице).

Иногда красивее и удобнее - визуально перемещать не сам элемент, а его клон или макет.

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

Сам элемент при этом скрывается display/visibility='none' или просто остается на месте, в зависимости от логики интерфейса.

Переносимый клон инициализуется в начале переноса и уничтожается в конце.

Когда иконка опущена, нам необходимо определить, куда.
В другое хранилище - переместить. В корзину - удалить, и т.п.

Существенная техническая проблема заключается в том, что событие mouseup сработает не на корзине, а на переносимом элементе, т.к. курсор мыши находится именно над ним.

Поэтому в событии будет информация об элементе непосредственно под курсором. На картинке выше event.target = сердечко, а корзина в объекте события event не присутствует.

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

В момент опускания на корзину выводится сообщение, перемещаемая иконка - в переменной dragObject, цель переноса (корзина, объект-акцептор) - в переменной currentDropTarget.


Перенеси меня в корзину


В коде контроллера: функции, тело которых заменено на "...", остались без изменения с прошлого примера.

var dragMaster = (function() {

    var dragObject
    var mouseOffset

    var dropTargets = []

    function mouseUp(e){
		e = fixEvent(e)

		for(var i=0; i<dropTargets.length; i++){
			var targ  = dropTargets[i]
			var targPos    = getPosition(targ)
			var targWidth  = parseInt(targ.offsetWidth)
			var targHeight = parseInt(targ.offsetHeight)

			if(
			(e.pageX > targPos.x)                &&
			(e.pageX < (targPos.x + targWidth))  &&
			(e.pageY > targPos.y)                &&
			(e.pageY < (targPos.y + targHeight))){
				alert("перенесен объект dragObject на акцептор currentDropTarget")
			}
		}

		dragObject = null
		removeDocumentEventHandlers()
    }

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		dragObject  = this
		mouseOffset = getMouseOffset(this, e)

		addDocumentEventHandlers()

		return false
	}


	function removeDocumentEventHandlers() {
		document.onmousemove = null
		document.onmouseup = null
		document.ondragstart = null
		document.body.onselectstart = null
	}

	function addDocumentEventHandlers() {
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp

		document.ondragstart = function() { return false }
		document.body.onselectstart = function() { return false }
	}

    function getMouseOffset(target, e) {...}

    function mouseMove(e) {...}

    return {
		makeDraggable: function(element){...},

		addDropTarget: function(dropTarget){
			dropTargets.push(dropTarget)
		}

    }
}())
var dragMaster2 = (function() {

    var dragObject
    var mouseOffset

    var dropTargets = []

    function mouseUp(e){
		e = fixEvent(e)

		for(var i=0; i<dropTargets.length; i++){
			var targ  = dropTargets[i]
			var targPos    = getPosition(targ)
			var targWidth  = parseInt(targ.offsetWidth)
			var targHeight = parseInt(targ.offsetHeight)

			if(
			(e.pageX > targPos.x)                &&
			(e.pageX < (targPos.x + targWidth))  &&
			(e.pageY > targPos.y)                &&
			(e.pageY < (targPos.y + targHeight))){
				alert("dragObject was dropped onto currentDropTarget!")
			}
		}

		dragObject = null
		removeDocumentEventHandlers()
    }

	function removeDocumentEventHandlers() {
		document.onmousemove = null
		document.onmouseup = null
		document.ondragstart = null
		document.body.onselectstart = null
	}

	function getMouseOffset(target, e) {
		var docPos	= getPosition(target)
		return {x:e.pageX - docPos.x, y:e.pageY - docPos.y}
	}


	function mouseMove(e){
		e = fixEvent(e)

		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}
		return false
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		dragObject  = this
		mouseOffset = getMouseOffset(this, e)

		addDocumentEventHandlers()

		return false
	}

	function addDocumentEventHandlers() {
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp

		// отменить перенос и выделение текста при клике на тексте
		document.ondragstart = function() { return false }
		document.body.onselectstart = function() { return false }
	}

    return {

		makeDraggable: function(element){
			element.onmousedown = mouseDown
		},

		addDropTarget: function(dropTarget){
			dropTargets.push(dropTarget)
		}
    }
}())

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

Основных изменений всего три.

Добавлен массив dropTargets и функция addDropTarget, которая добавляет в него элементы, на которые можно дропать.

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

Если да, то демка всего лишь выводит сообщение. Реально приложение, конечно, может сделать более сложные действия.

Кроме того, установка и удаление обработчиков событий для document выделены в отдельные функции - просто в целях лучшей читаемости.

В удобном интерфейсе мы, скорее всего, захотим как-то показывать посетителю, над каким объектом он сейчас находится.

Единственно место, где это можно сделать - обработчик mouseMove. Сама проверка, над чем курсор сейчас находится, полностью аналогична mouseUp.

Однако, так как mouseMove выполняется при каждом передвижении мыши, его надо максимально оптимизировать.

Функция getPosition - довольно медленная: она работает с DOM, и ей надо пройти по всей цепочке offsetParent. Выполнять ее каждый раз при движении мыши для поиска текущего акцептора - все равно что нажать на большой-большой тормоз.

Стандартным выходом в такой ситуации является кеширование координат акцепторов, а точнее - их ограничивающих прямоугольников, так чтобы код mouseMove был максимально прост.


Пронеси меня над корзиной


Код уже стал довольно длинным, поэтому в листинге ниже повторяющиеся фрагменты заменены на троеточие "..."

var dragMaster = (function() {

    var dragObject
    var mouseOffset

    var dropTargets = []

	/* кеш прямоугольников границ акцепторов */
    var dropTargetRectangles

	/* текущий акцептор, над которым объект в данный момент */
	var currentDropTarget

	function cacheDropTargetRectangles() {
		dropTargetRectangles = /* сделать кеш прямоугольников */
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		/* начать перенос */
		dragObject  = this
		mouseOffset = getMouseOffset(this, e)

		/* закешировать прямоугольники при начале переноса */
		cacheDropTargetRectangles()

		addDocumentEventHandlers()

		return false
	}

	function getCurrentTarget(e) {
		var dropTarget = /* взять из кеша прямоугольник, в котором мышь */

		return dropTarget /* null, если мы не над акцепторами */
	}

	function mouseMove(e){
		/* визуально показать перенос объекта */
		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}

		/* newTarget = над каким акцептором сейчас объект */
		var newTarget = getCurrentTarget(e)

		/* если ушли со старого акцептора */
		if (currentDropTarget && currentDropTarget != newTarget) {
			/* убрать выделение currentDropTarget */
		}

		/* пришли на новый акцептор (возможно null) */
		currentDropTarget = newTarget

		/* если новый акцептор существует (не null) */
		if (newTarget) {
			/* выделить newTarget */
		}

		return false;
    }

    function mouseUp(ev){
		if (currentDropTarget) {
			alert("перенесен объект dragObject на акцептор currentDropTarget")
			/* убрать выделение с  currentDropTarget */
		}

		/* конец операции переноса */
		dragObject = null
		removeDocumentEventHandlers()
    }

	function getMouseOffset(target, e) {...}

	function addDocumentEventHandlers() {...}
	function removeDocumentEventHandlers() {...}

    return {
		...
    }
}())

Полностью рабочий вариант с кешем и т.п. - здесь:

var dragMaster = (function() {

    var dragObject
    var mouseOffset

    var dropTargets = []

    var dropTargetRectangles

	var currentDropTarget

	function cacheDropTargetRectangles() {
		dropTargetRectangles = []

		for(var i=0; i<dropTargets.length; i++){
			var targ  = dropTargets[i];
			var targPos    = getPosition(targ);
			var targWidth  = parseInt(targ.offsetWidth);
			var targHeight = parseInt(targ.offsetHeight);

			dropTargetRectangles.push({
				xmin: targPos.x,
				xmax: targPos.x + targWidth,
				ymin: targPos.y,
				ymax: targPos.y + targHeight,
				dropTarget: targ
			})
		}
	}

    function mouseUp(ev){
		if (currentDropTarget) {
			alert("перенесен объект dragObject на акцептор currentDropTarget")
			showRollOff(currentDropTarget)
		}

		dragObject = null
		removeDocumentEventHandlers()
    }

	function getCurrentTarget(e) {
		for(var i=0; i<dropTargetRectangles.length; i++){
			var rect  = dropTargetRectangles[i];

			if(
			(e.pageX > rect.xmin)  &&
			(e.pageX < rect.xmax)  &&
			(e.pageY > rect.ymin)  &&
			(e.pageY < rect.ymax)){
				return rect.dropTarget
			}
		}

		return null
	}

	function mouseMove(e){
		e = fixEvent(e)

		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}

		var newTarget = getCurrentTarget(e)

		if (currentDropTarget && currentDropTarget != newTarget) {
			showRollOff(currentDropTarget)
		}

		currentDropTarget = newTarget
		if (newTarget) {
			showRollOn(newTarget)
		}

		return false;
    }

	function showRollOn(elem) {
		elem.className = 'uponMe'
	}

	function showRollOff(elem) {
		elem.className = ''
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return
		
		dragObject  = this
		mouseOffset = getMouseOffset(this, e)

		cacheDropTargetRectangles()

		addDocumentEventHandlers()

		return false
	}


	function getMouseOffset(target, e) {...}

	function addDocumentEventHandlers() {...}
	function removeDocumentEventHandlers() {...}

    return {
		...
    }
}())
var dragMaster3 = (function() {

    var dragObject
    var mouseOffset

    var dropTargets = []

    var dropTargetRectangles

	var currentDropTarget

	function cacheDropTargetRectangles() {
		dropTargetRectangles = []

		for(var i=0; i<dropTargets.length; i++){
			var targ  = dropTargets[i];
			var targPos    = getPosition(targ);
			var targWidth  = parseInt(targ.offsetWidth);
			var targHeight = parseInt(targ.offsetHeight);

			dropTargetRectangles.push({
				xmin: targPos.x,
				xmax: targPos.x + targWidth,
				ymin: targPos.y,
				ymax: targPos.y + targHeight,
				dropTarget: targ
			})
		}

	}

    function mouseUp(ev){
		if (currentDropTarget) {
			alert("droped dragObject into curTarget")
			showRollOff(currentDropTarget)
		}

		dragObject = null
		removeDocumentEventHandlers()
    }

	function removeDocumentEventHandlers() {
		document.onmousemove = null
		document.onmouseup = null
		document.ondragstart = null
		document.body.onselectstart = null
	}

	function getMouseOffset(target, e) {
		var docPos	= getPosition(target)
		return {x:e.pageX - docPos.x, y:e.pageY - docPos.y}
	}

	function getCurrentTarget(e) {
		for(var i=0; i<dropTargetRectangles.length; i++){
			var rect  = dropTargetRectangles[i];

			if(
			(e.pageX > rect.xmin)  &&
			(e.pageX < rect.xmax)  &&
			(e.pageY > rect.ymin)  &&
			(e.pageY < rect.ymax)){
				return rect.dropTarget
			}
		}

		return null
	}


	function mouseMove(e){
		e = fixEvent(e)

		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}

		var newTarget = getCurrentTarget(e)

		if (currentDropTarget && currentDropTarget != newTarget) {
			showRollOff(currentDropTarget)
		}

		currentDropTarget = newTarget
		if (newTarget) {
			showRollOn(newTarget)
		}

		return false;
    }

	function showRollOn(elem) {
		elem.className = 'uponMe'
	}

	function showRollOff(elem) {
		elem.className = ''
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		dragObject  = this
		mouseOffset = getMouseOffset(this, e)

		cacheDropTargetRectangles()

		addDocumentEventHandlers()

		return false
	}

	function addDocumentEventHandlers() {
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp

		// отменить перенос и выделение текста при клике на тексте
		document.ondragstart = function() { return false }
		document.body.onselectstart = function() { return false }
	}


    return {

		makeDraggable: function(element){
			element.onmousedown = mouseDown
		},

		addDropTarget: function(dropTarget){
			dropTargets.push(dropTarget)
		}


    }
}())

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

Следуя общему принципу отделения мух от котлет - лучше отделить простой клик на объекте от начала drag and drop.

Еще одна причина - дорогая инициализация drag & drop: нужно прокешировать все возможные акцепторы. Совершенно не обязательно это делать на mousedown, если имеем простой клик.

Как отделить? Очень просто:

  1. При mousedown запомнить координаты и объект, но пока не начинать перенос
  2. Если произошло событие mouseup - это был всего лишь клик, сбросить координаты
  3. В mousemove проверить: если есть запомненные координаты и курсор отошел от них хотя бы на 2 пикселя - начать перенос

В коде этой демки стоит расстояние не 2, а 25 пикселей, в целях наглядности происходящего.

До перемещения курсора на 25 пикселей вверх или вниз перенос не начнется.


Отрыв от земли - после перемещения на 25 или больше пикселей


Код демо:

var dragMaster = (function() {

	...

	var mouseDownAt

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

 		mouseDownAt = { x: e.pageX, y: e.pageY, dragObject: this }

		addDocumentEventHandlers()

		return false
	}

	function mouseMove(e){
		e = fixEvent(e)

		if (mouseDownAt) {
			if (Math.abs(mouseDownAt.x-e.pageX)<25 && Math.abs(mouseDownAt.y-e.pageY)<25) {
				// слишком близко, возможно это клик
				return
			}
			// курсор нажатой мыши отвели далеко - начинаем перенос
			dragObject  = mouseDownAt.dragObject
			mouseOffset = getMouseOffset(dragObject, mouseDownAt.x, mouseDownAt.y)
			cacheDropTargetRectangles()
			// запомненные координаты нам больше не нужны
			mouseDownAt = null
		}

		showDrag(e) // показать перенос

		return false;
    }

    function mouseUp(ev){
		if (!dragObject) {
			// ничего не начали нести, был просто клик
			mouseDownAt = null
		} else {
			// чего-то несем - обрабатываем конец переноса
			if (currentDropTarget) {
				alert("перенесен объект dragObject на акцептор currentDropTarget")
				showRollOff(currentDropTarget)
			}

			dragObject = null
		}

		// (возможный) drag and drop завершен
		removeDocumentEventHandlers()
    }

	function showDrag(e) {
		// перенести объект
		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}

		// подсветить акцептор
		var newTarget = getCurrentTarget(e)

		if (currentDropTarget && currentDropTarget != newTarget) {
			showRollOff(currentDropTarget)
		}

		currentDropTarget = newTarget
		if (newTarget) {
			showRollOn(newTarget)
		}
	}

	function getMouseOffset(target, x, y) {
		// для удобства поменяли синтаксис: x/y вместо event
		var docPos	= getPosition(target)
		return {x:x - docPos.x, y:y - docPos.y}
	}

	function cacheDropTargetRectangles() {...}

	function removeDocumentEventHandlers() {...}

	function getCurrentTarget(e) {...}

	function showRollOn(elem) {...}

	function showRollOff(elem) {...}

	function addDocumentEventHandlers() {...}


    return {
		...
    }
}())
var dropMove2 = (function() {

    var dragObject
    var mouseOffset
	var mouseDownAt

    var dropTargets = []


    var dropTargetRectangles

	var currentDropTarget

	function cacheDropTargetRectangles() {
		dropTargetRectangles = []

		for(var i=0; i<dropTargets.length; i++){
			var targ  = dropTargets[i];
			var targPos    = getPosition(targ);
			var targWidth  = parseInt(targ.offsetWidth);
			var targHeight = parseInt(targ.offsetHeight);

			dropTargetRectangles.push({
				xmin: targPos.x,
				xmax: targPos.x + targWidth,
				ymin: targPos.y,
				ymax: targPos.y + targHeight,
				dropTarget: targ
			})
		}
	}


    function mouseUp(ev){
		if (!dragObject) {
			mouseDownAt = null
		} else {
			if (currentDropTarget) {
				alert("перенесен объект dragObject на акцептор currentDropTarget")
				showRollOff(currentDropTarget)
			}

			dragObject = null
		}

		removeDocumentEventHandlers()
    }

	function removeDocumentEventHandlers() {
		document.onmousemove = null
		document.onmouseup = null
		document.ondragstart = null
		document.body.onselectstart = null
	}

	function getMouseOffset(target, x, y) {
		var docPos	= getPosition(target)
		return {x:x - docPos.x, y:y - docPos.y}
	}

	function getCurrentTarget(e) {
		for(var i=0; i<dropTargetRectangles.length; i++){
			var rect  = dropTargetRectangles[i];

			if(
			(e.pageX > rect.xmin)  &&
			(e.pageX < rect.xmax)  &&
			(e.pageY > rect.ymin)  &&
			(e.pageY < rect.ymax)){
				return rect.dropTarget
			}
		}

		return null
	}


	function mouseMove(e){
		e = fixEvent(e)

		if (mouseDownAt) {
			if (Math.abs(mouseDownAt.x-e.pageX)<25 && Math.abs(mouseDownAt.y-e.pageY)<25) {
				return
			}
			dragObject  = mouseDownAt.dragObject
			mouseOffset = getMouseOffset(dragObject, mouseDownAt.x, mouseDownAt.y)
			cacheDropTargetRectangles()
			mouseDownAt = null
		}

		showDrag(e)

		return false;
    }

	function showDrag(e) {

		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}

		var newTarget = getCurrentTarget(e)

		if (currentDropTarget && currentDropTarget != newTarget) {
			showRollOff(currentDropTarget)
		}

		currentDropTarget = newTarget
		if (newTarget) {
			showRollOn(newTarget)
		}
	}

	function showRollOn(elem) {
		elem.className = 'uponMe'
	}

	function showRollOff(elem) {
		elem.className = ''
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

 		mouseDownAt = { x: e.pageX, y: e.pageY, dragObject: this }

		addDocumentEventHandlers()

		return false
	}

	function addDocumentEventHandlers() {
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp

		// отменить перенос и выделение текста при клике на тексте
		document.ondragstart = function() { return false }
		document.body.onselectstart = function() { return false }
	}


    return {

		makeDraggable: function(element){
			element.onmousedown = mouseDown
		},

		addDropTarget: function(dropTarget){
			dropTargets.push(dropTarget)
		}


    }
}())

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

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

Визуально это проявляется как задержка от клика на объекте до его фактического переноса - потому что долго, с 100% поеданием одного ядра CPU обрабатывается mousedown.

Речь тут идет о 100 акцепторах или больше - например, при переносе между длинными списками или деревьями. Хотя какие-то тормоза могут быть заметны и от 50.

Принципиальных решений здесь два.

Этот малоизвестный метод работает во всех браузерах и возвращает элемент по координатам на странице.

Firefox/IE используют для этого clientX/Y, а Opera, Chrome и Safari - pageX/Y.

Возвращенный элемент является самым глубоко вложенным на точке с координатами (x,y). Это может быть текстовый узел в том числе.
Следуя по цепочке родителей, легко найти нужного акцептора.

На время вызова elementFromPoint необходимо спрятать переносимый элемент, чтобы он не закрывал акцептора.

Псевдокод будет выглядеть так:

function getCurrentTarget(e) {
  dragObject.style.display = 'none' // спрятать

  if (navigator.userAgent.match('MSIE') || navigator.userAgent.match('Gecko')) {
       // IE || FF
	var elem = document.elementFromPoint(e.clientX,e.clientY)
  } else {
	var elem = document.elementFromPoint(e.pageX,e.pageY)
  }
  dragObject.style.display = ''  // показать побыстрее

  while (elem!= null) {
        if (elem является акцептором) {
            return elem
        }
        elem = elem.parentNode
  }

  // не нашли 
  return null
}

Если структура объекта переноса нам известна - возможно, кешировать каждый элемент ни к чему?

Например, мы переносим объект в список акцепторов:

<ul class="articles-list">
  <li>...</li>
  <li>...</li> 
  <li>...</li>
</ul>

И мы знаем, что каждый элемент имеет фиксированную высоту и отступы:

.articles-list li {
  height: 20px;
  margin: 0px;
  padding: 0px;
}

В таком случае, можно вычислить номер LI, разделив общую высоту контейнера на высоту акцептора.

function getCurrentTarget(e) {
  var rect = /* ограничивающий прямоугольник для UL */

  // (ulX, ulY) - координаты относительно верхнего-левого угла контейнера
  var ulX= e.pageX - rect.xmin
  var ulY = e.pageY - rect.ymin

  if ( ulX < 0 || ulX > rect.xmax-rect.xmin || ulY < 0 || ulY > rect.ymax-rect.ymin) {
    /* событие за границами списка */
    return null
  }

  /* по 20px на каждого ребенка-акцептора */
  var childNum = ulY / 20  

  return rect.dropTarget.childNodes[childNum]
}

Конечно, такая оптимизация возможна не всегда и зависит от конкретной задачи.

В ряде задач допустимо не сохранять переносимый элемент под курсором, а передвинуть его на несколько пикселей в сторону, то mouseUp и mouseMove будут срабатывать уже на акцепторе, который станет возможным получить из event.target.

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

Можно переносить не сам объект, а его "аватар", схематическое изображение.

Это может быть полезно:

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

Код dragMaster'а на текущий момент сочетает весь функционал по отслеживанию переноса, отображению и опусканию на акцептор.

Целесообразно его разделить на три компоненты: переносимые объекты, цели переноса (акцепторы) и менеджер, который следит, что куда переносится.

Объект DragObject - обобщенный переносимый объект, который привязывается к DOM-элементу. Он представлен на следующем листинге.

function DragObject(element) {
	element.dragObject = this
	
	dragMaster.makeDraggable(element)
	
	var rememberPosition
	var mouseOffset
	
	this.onDragStart = function(offset) {
		var s = element.style
		rememberPosition = {top: s.top, left: s.left, position: s.position}
		s.position = 'absolute'
		
		mouseOffset = offset
	}
		
	this.hide = function() {
		element.style.display = 'none' 
	}
	
	this.show = function() {
		element.style.display = '' 
	}
	
	this.onDragMove = function(x, y) {
		element.style.top =  y - mouseOffset.y +'px'
		element.style.left = x - mouseOffset.x +'px'
	}
	
	this.onDragSuccess = function(dropTarget) { }
	
	this.onDragFail = function() {
		var s = element.style
		s.top = rememberPosition.top
		s.left = rememberPosition.left
		s.position = rememberPosition.position
	}
	
	this.toString = function() {
		return element.id
	}
}

Использование:

new DragObject(element)

Достаточно одного вызова new, т.к функция DragObject добавляет конструируемый объект к element в свойство element.dragObject:

...
element.dragObject = this
...

Методы:

onDragStart(offset)
Вызывается при начале переноса. В текущей реализации отрывает объект "от земли" и запоминает текущую позицию в rememberPosition и сдвиг курсора мыши от левого-верхнего угла объекта в mouseOffset.

В другой реализации может показывать перенос как-то по-другому, например создавать "переносимый клон" объекта.

onDragMove(x, y)
Вызывается при переносе объекта в координаты (x,y). Отображает перенос.
onDragFail()
Обрабатывает неудачный перенос. В текущей реализации возвращает объект на старые координаты.

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

onDragSuccess(dropTarget)
Обрабатывает успешный перенос. В текущей реализации обработка успешного переноса целиком сосредоточена у принимающего объекта DropTaget, поэтому эта функция пустая.
show/hide()
Показать/спрятать переносимый объект - вспомогательные методы

DropTarget - обобщенный объект-акцептор, потенциальная цель переноса. Может быть большим контейнером или маленьким элементом - не важно.

Как показано дальше, поддерживаются вложенные DropTarget: объект будет положен туда, куда следует, вне зависимости от степени вложенности.

function DropTarget(element) {
	
	element.dropTarget = this
	
	this.canAccept = function(dragObject) {
		return true
	}
	
	this.accept = function(dragObject) {
		this.onLeave()
		
		dragObject.hide()
		
		alert("Акцептор '"+this+"': принял объект '"+dragObject+"'")
	}
	
	this.onLeave = function() {
		element.className =  ''
	}
	
	this.onEnter = function() {
		element.className = 'uponMe'
	}
	
	this.toString = function() {
		return element.id
	}
}

Методов у DropTarget поменьше, чем у DragObject. Еще бы, акцептору ведь не нужно анимировать собственный перенос.

canAccept(dragObject)
При проносе объекта над DropTarget, dragMaster спросит у акцептора, может ли он принять dragObject. Если нет - dragMaster проигнорирует этот акцептор.

В текущей реализации всегда возвращает true, то есть положить можно. Вообще говоря, может проверять класс переносимого объекта:

this.canAccept = function(dragObject) {
    // могу принять только объекты типа TreeNodeDragObject 
    return dragObject instanceof TreeNodeDragObject
}
accept(dragObject)
Принимает переносимый объект. Объект может быть перемещен(в другой каталог) или уничтожен(корзина) - зависит от вашей логики обработки переноса.

В конкретном приложении стоит посмотреть особо, какую часть логики конца переноса стоит поместить DragObject#onDragSuccess, а какую - в DropTarget#accept. Как правило, основную логику переноса удобно сосредоточить у DropTarget.

onLeave/onEnter
Анимация возможности положить объект на акцептор. Как правило, акцептор при этом подсвечивается. Эти методы будут вызваны только если акцептор может принять (canAccept) переносимый объект.

Ну и, наконец, похудевший и лишенный большинства обязанностей dragMaster.

var dragMaster = (function() {

    var dragObject
    var mouseDownAt

	var currentDropTarget

	
	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

 		mouseDownAt = { x: e.pageX, y: e.pageY, element: this }

		addDocumentEventHandlers()

		return false
	}


	function mouseMove(e){
		e = fixEvent(e)

		// (1)
		if (mouseDownAt) {
			if (Math.abs(mouseDownAt.x-e.pageX)<5 && Math.abs(mouseDownAt.y-e.pageY)<5) {
				return false
			}
			// Начать перенос
			var elem  = mouseDownAt.element
			// текущий объект для переноса
			dragObject = elem.dragObject
			
			// запомнить, с каких относительных координат начался перенос
			var mouseOffset = getMouseOffset(elem, mouseDownAt.x, mouseDownAt.y)
			mouseDownAt = null // запомненное значение больше не нужно, сдвиг уже вычислен
			
			dragObject.onDragStart(mouseOffset) // начали
			
		}

		// (2)
		dragObject.onDragMove(e.pageX, e.pageY)
		
		// (3)
		var newTarget = getCurrentTarget(e)
		
		// (4)
		if (currentDropTarget != newTarget) {
			if (currentDropTarget) {
				currentDropTarget.onLeave()
			}
			if (newTarget) {
				newTarget.onEnter()
			}
			currentDropTarget = newTarget

		}
		
		// (5)
		return false
    }
	
	
    function mouseUp(){
		if (!dragObject) { // (1)
			mouseDownAt = null
		} else {
			// (2)
			if (currentDropTarget) {
				currentDropTarget.accept(dragObject)
				dragObject.onDragSuccess(currentDropTarget)
			} else {
				dragObject.onDragFail()
			}

			dragObject = null
		}

		// (3)
		removeDocumentEventHandlers()
    }


	function getMouseOffset(target, x, y) {
		var docPos	= getOffset(target)
		return {x:x - docPos.left, y:y - docPos.top}
	}

	
	function getCurrentTarget(e) {
		// спрятать объект, получить элемент под ним - и тут же показать опять
		
		if (navigator.userAgent.match('MSIE') || navigator.userAgent.match('Gecko')) {
			var x=e.clientX, y=e.clientY
		} else {
			var x=e.pageX, y=e.pageY
		}
		// чтобы не было заметно мигание - максимально снизим время от hide до show
		dragObject.hide()
		var elem = document.elementFromPoint(x,y)
		dragObject.show()
		
		// найти самую вложенную dropTarget
		while (elem) {
			// которая может принять dragObject 
			if (elem.dropTarget && elem.dropTarget.canAccept(dragObject)) {
				return elem.dropTarget
			}
			elem = elem.parentNode
		}
		
		// dropTarget не нашли
		return null
	}


	function addDocumentEventHandlers() {
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp
		document.ondragstart = document.body.onselectstart = function() {return false}
	}
	function removeDocumentEventHandlers() {
		document.onmousemove = document.onmouseup = document.ondragstart = document.body.onselectstart = null
	}


    return {

		makeDraggable: function(element){
			element.onmousedown = mouseDown
		}
    }
}())
mouseDown(e)
Метод не изменился. Он запоминает позицию, на которой произошло нажатие кнопки мыши mouseDownAt и добавляет остальные обработчики слежения за переносом addDocumentEventHandlers().
mouseMove(e)
Этот обработчик присоединяется к document в момент mouseDown.

  1. Если в момент его срабатывания есть запомненное нажатие и курсор отошел больше чем на 5 пикселей - значит начался перенос. DragObject'у это сообщается вызовом onDragStart с передачей текущего сдвига курсора относительно левого-верхнего угла mouseOffset.
  2. Объект информируется о текущих координатах переноса.
  3. Вычисляем текущий акцептор при помощи модифицированного метода getCurrentTarget (см. выше в разделе "Оптимизация").
  4. Обработать нового акцептора и уход со старого акцептора.
  5. Вернуть false для блокирования действий браузера и всплывания события mouseMove
mouseUp()
Этот обработчик завершает (возможный) перенос. Обратите внимание - само событие в данном случае не нужно. Весь процесс переноса отслеживается событием mouseMove.

  1. Если объект переноса не установлен, значит перед этим было простое нажатие mouseDown, элемент не отнесли на 5 пикселей в сторону - это не drag'n'drop.
  2. При наличии акцептора - перенос успешно завершается, если акцептора нет - отменяется.
  3. В любом случае в конце все обработчики с документа снимаются

Функция определения позиции элемента getPosition заменена на более точный вариант getOffset, описанный в статье про определение координат.

Скачать пакет из итогового фреймворка и демок можно здесь.

В комплекте - пара демок. На этой странице обе подключены в iframe'ах.

Открыть в отдельном окне: demo.html

В этой демке акцепторами являются два вложенных DIV'а.

Открыть в отдельном окне: nested.html

В процессе переноса акцепторы объекты могут сдвигаться, освобождая место.

Если вы используете кеш координат акцепторов, то при этом производится соответствующее обновление кеша, но вместо полного перевычисления обновляются только координаты сдвинувшихся объектов.

Например, при раздвижении списка вниз - увеличиваются Y-координаты всех сдвинувшихся LI.
При этом для удобного обновления кеш делается не массивом, а объектом с доступом по ID элемента, так чтобы можно было легко обновить именно нужные координаты.

Иногда, например, при смене позиции элемента в списке, объект переносится не на акцептор, а между акцепторами. Как правило, "между" - имеется в виду по высоте.

Для этого логику определения currentDropTarget нужно поменять. Возможно два варианта:

Допустим перенос как между, так и над
В этом случае акцептор делится на 3 части по высоте clientHeight: 25% - 50% - 25%, и определяется попадание координаты события на нужную часть.
Перенос только между
Акцептор делится на две части: 50% - 50%

Кроме того, в дополнение к текущему акцептору currentDropTarget добавляется флаг, обозначающий, куда относительно акцептора происходит перенос.

Индикацию "переноса между" удобнее всего делать либо раздвижением элементов, либо показом полосы-индикатора border-top/border-bottom, как показано на рисунке ниже:

Обычно при переносе объекта куда-либо посетитель может просто отпустить его в любом месте.

При этом drag and drop фреймворк анимирует отмену переноса. Один из частых вариантов - скольжение объекта обратно к исходному месту, откуда его взяли.
Конечно, для этого исходное место необходимо запомнить.

Если перетаскивается аватарка(клон), то можно его и просто уничтожить.

Совершенно не факт, что любой объект можно перенести на любой аксептор.
Как правило, все с точностью наоборот.

Акцептор может быть недоступен по двум причинам:

  • либо это несовпадение типов, для этого drag and drop должен предусматривать различные типы объектов/акцепторов и проверку их соответствия
  • либо у посетителя недостаточно для этого прав, в рамках наложенных CMS ограничений

При переносе над недоступным акцептором - getCurrentTarget просто возвращает null.

Иногда проверку прав и результата переноса необходимо делать на сервере. Как правило, такую проверку выполняют только при mouseUp, чтобы не нагружать сервер излишними запросами во время mouseMove.

Здесь используется два подхода

Синхронный XmlHttpRequest
Запрос отправляется синхронно, чтобы не нарушать общий поток выполнения. Все хорошо, вот только браузер видимо подвисает при отпускании кнопки мыши. Да и другие недостатки у синхронного запроса есть.
Отложенная отмена переноса
Более продвинутый и удобный вариант. Основан на "оптимистичном" сценарии, по которому перенос, как правило, проходит успешно.

  1. Посетитель кладет объект туда, куда он хочет.
  2. Фреймворк перемещает объект, и затем "в фоне" делает асинхронный запрос к серверу. На запрос вешается callback, содержащий информацию, откуда был перенесен объект.
  3. Сервер обрабатывает перенос и возвращает ответ, все ли в порядке.
  4. Если нет - callback выводит ошибку и объект возвращается туда, откуда был перенесен.

Вы узнали основные принципы и особенности реализации drag and drop в яваскрипт.

Рассмотрели ряд оптимизаций и различные организации переноса на уровне UI.

Все современные javascript-библиотеки используют описанную схему и какие-то (не все) из оптимизаций.

Пакет из итогового фреймворка и демок доступен здесь.


Автор: chrysalis (не зарегистрирован), дата: 28 апреля, 2009 - 17:54
#permalink

А просто использование jQuery.ui.sortable не нравится?
Или статья именно в обучающих цельях? Тогда, конечно, классно - полезно будет.


Автор: Илья Кантор, дата: 28 апреля, 2009 - 19:16
#permalink

Использование jQuery.ui.sortable, а также Dojo draggable, а также других существующих библиотек есть гуд. Другое дело, что они не всегда соответствуют решаемой задаче, занимают больше места, да и вообще полезно понимать, что происходит.


Автор: milk3dfx, дата: 30 апреля, 2009 - 00:16
#permalink

Эх, много бы время мне сэкономила эта статья выйдя на пол года раньше=) Облазил я тогда всё но кроме простых примеров ни чего не нашёл. Раньше я использовал script.aculo и прототип, для проекта где было много перетаскиваемых объектов, что сказать мне не хватило ее функциональности. Не было в ней событий которые вызывались в тот момент когда перетаскиваемый объект начинал заходить и уходить в область drop объекта=) пришлось добавит только предварительно поняв как там всё это устроенно. Вот живой пример. Для простых целей он конечно же подходят.
События которые отображающие весь процесс это:
onStartDrag()
onStopDrag()
onDrag()

onStartHover()
onHover()
onStopHover()
onDrop()
И если их сделать тогда вам больше не чего не придётся дописывать


Автор: Илья Кантор, дата: 30 апреля, 2009 - 14:05
#permalink

Все это легко делается..
Можно даже добавить это в нужную библиотеку, если понимать, что и как там работает.

А статья как раз это и описывает.

UPDATED: добавил в статью раздел про рефакторинг с событиями.


Автор: milk3dfx, дата: 30 апреля, 2009 - 22:16
#permalink

Да без условно это хорошая и нужная статья.


Автор: Dmitry A. Soshnikov, дата: 2 мая, 2009 - 17:44
#permalink

Хорошая статья.

Пустую false-функцию для document.ondragstart и document.body.onselectstart тоже можно сделать одну, а не создавать каждый раз при mouseup'e:

var emptyFalseFn = function() { return false };
...
document.ondragstart = emptyFalseFn;
document.body.onselectstart = emptyFalseFn;

Автор: Nicholas (не зарегистрирован), дата: 17 мая, 2009 - 21:05
#permalink

Третий день изучаю js, для того что бы заменить формы html на "Drag and Drop" , дабы изменять переменные не перегружая страницу.

Какой метод лучше использовать для этой цели (для FF2) ваш первый или http://elouai.com/javascript-drag-and-drop.php ?
("Демо улучшенного метода" в FF2 под Linux не работает).

Если я "перетащил" div с определенным ID в определенную область - как мне лучше запустить произвольную функцию, передав ей этот ID ?

Спасибо.


Автор: Илья Кантор, дата: 18 мая, 2009 - 11:57
#permalink

В Firefox 2 вполне может не работать. Используйте Firefox 3, а то Firefox 4 пропустите

UPDATE: используйте Firefox 3.5


Автор: Гость (не зарегистрирован), дата: 2 июля, 2014 - 18:25
#permalink

Ты дебил


Автор: Ax (не зарегистрирован), дата: 27 мая, 2009 - 07:39
#permalink

Статья очень крутая.

Больше всего в это статье мне нравится не сама описываемая в ней тема, хотя и она интересна сама по себе, а то, как автор оперирует ОО подходом применительно к JS. Использует много интересных приемов и главное не отдельно, а непосредственно решая задачу.

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

И вообще, автор талантлив. Я считаю, что это идеальный обучающий материал. Хотя некоторые моменты не совсем раскрыты, но это вполне верно, так как статья не о них.
Большое спасибо за качественный материал.


Автор: Гость (не зарегистрирован), дата: 28 мая, 2009 - 15:36
#permalink

отмечаю что статья не доведена до логического конца в зугрузку необходимо добавить не только JS, но и маленький html где используется данный скирпт. тогда вопросов
"Может кто подскажет как использовать???Ну есть у меня этот котроллер.и есть объект, допустим div id="im".Как применить к нему это все???"
возникать не будет. к сожаленю этим страдает не только эта статья здесь.


Автор: Илья Кантор, дата: 28 мая, 2009 - 15:41
#permalink

Добавлю пример.


Автор: Ax (не зарегистрирован), дата: 29 мая, 2009 - 07:05
#permalink

Пример, конечно, не помешал бы, но.

У меня есть мнение, что изучать программирование и его основы нужно не с этой статьи. Поэтому такие моменты как банальное не знание HTML или не понимание общих принципов программирования как такого (не говоря об ООП), это, в конечном счете, не проблема автора. Цель данной статьи объяснить и принципы, а не дать рабочий пример. Если нужен механизм, то нужно читать не статьи, а документацию библиотек, а лучше базовый курс.

А от вопросов: - "Где в javascript C++?" и - "Как добавить на страницу этот форум?", никуда не деться.


Автор: Илья Кантор, дата: 31 мая, 2009 - 00:04
#permalink

Расширил статью, добавил итоговый вариант после рефакторинга и демо.
Сделал общий скачиваемый архив.

Кода, как всегда, мало. Все чистенько, понятненько, юзабельно.


Автор: Гость (не зарегистрирован), дата: 31 мая, 2009 - 11:54
#permalink

Отличная статья. Все хорошо расписано и понятно. Для определенных сайтов драг-энд-дроп сильно повысит интерактивность управления (к примеру кидать товары в магазине в тележку).


Автор: zir05 (не зарегистрирован), дата: 4 июня, 2009 - 21:57
#permalink

Всегда привлекала тема drag and drop - в javascript автору благодарность


Автор: Гость (не зарегистрирован), дата: 5 июня, 2009 - 13:36
#permalink

Спасибо огромное! Теперь я знаю, как решить свою задачу!


Автор: Гость (не зарегистрирован), дата: 5 июня, 2009 - 15:39
#permalink

зачот


Автор: Жандос (не зарегистрирован), дата: 5 июня, 2009 - 15:59
#permalink

Автор а почему драг и дропятся? шутка
Отличная статья огромное спасибо


Автор: Гость (не зарегистрирован), дата: 5 июня, 2009 - 16:09
#permalink

Спасибо, все доступно и понятно даже для человека посредственно знающего javascript.


Автор: illusions (не зарегистрирован), дата: 5 июня, 2009 - 19:27
#permalink

Статья просто отличная - на 5+.
Хотя в таких случаях стараюсь использовать готовое - тот же jQuery.


Автор: unnamed (не зарегистрирован), дата: 6 июня, 2009 - 18:03
#permalink

Неплохо было было добавить реакцию на скролл. А то если во время перетаскивания прокрутить колесо мыши, то объект замирает в первоначальной позиции и потом при малейшем движении рывком прыгает в новое место. Не очень красиво, правда? Также часто делают автоскролл при поднесении объекта к краю экрана.


Автор: Илья Кантор, дата: 6 июня, 2009 - 23:40
#permalink

Да, реакция на скролл и правда не разобрана. Возможно, со временем допишу.

Автопрокрутку делают отслеживанием координат мыши - если у края окна/контейнера то вызывается прокрутка.

По самому событию скролла, чтобы все обработать ок - нужно определить, на сколько прокрутили - и апдейтнуть позицию..


Автор: seyfer, дата: 23 ноября, 2012 - 06:26
#permalink

Сейчас тоже мучаюсь с автоскроллом. У меня сцена больше, чем страница. Было бы хорошо это описать.


Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 13:05
#permalink

Все это очень замечательно, но для действительно полноценного drag'n'drop'а следует рассмотреть еще много-много интересного. Итак:

1. Вы совершенно не учитываете возможность наличия других обработчиков mousemove/mouseup, которые могут сделать stopPropagation/cancelBubble, и Ваш drag'n'drop никогда не кончится. Во избежание этой ситуации обработчики mousemove/mouseup следует навешивать С КАПЧУРИНГОМ на document: document.addEventListener('mousemove', callback, true). В IE для тех же целей необходимо установить setCapture на таскаемый элемент.

2. Вы не учитываете возможность прерывания таскания, например, по alt+tab, одновременному нажатию нескольких кнопок мыши или выходу курсора за пределы документа.

3. Есть очень скользкий момент с тем, что после mouseup приходит событие click, которое, вообще говоря, логически вовсе не click - если по клику выполняется какое-то другое действие, то оно после драггинга очевидно выполняться не должно. Поэтому надо в определенных ситуациях слушать приходящий следом click и отменять его.

Это только верхушка айсберга на самом деле. Там еще море всевозможных тонкостей, особенно с разными странными браузерами типа Оперы 9.2 и Сафари под Мак.


Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 14:07
#permalink

И кстати, если говорить про jQuery, его стандартная таскалка про все это тоже ничего не знает.


Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 14:09
#permalink

И кстати, в FF2 Ваши примеры не работают.


Автор: Илья Кантор, дата: 8 июня, 2009 - 15:33
#permalink

В FF2 мои примеры не работают и не будут. Как и в Opera 7. Динозаврам место в музеях.

P.S. Легко можно сделать, чтоб работали, 2 строки кода поправить. Но может не надо а?


Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 19:03
#permalink

FF2 использует примерно 2% пользователей - не так уж и мало. Больше чем Сафари под Мак, например. То же касается Оперы 9.27. А эти два браузера не отслеживают выход мыши за пределы документа (т.е. в строку меню браузера, например).


Автор: Илья Кантор, дата: 8 июня, 2009 - 22:21
#permalink

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

1) Попробовать предусмотреть такой нестандарт и не глюкануть сильно
2) Иметь в виду, что пользователь, который так делает, обычно морально готов к глюкам.


Автор: Гость (не зарегистрирован), дата: 11 июня, 2009 - 14:26
#permalink

В приципе FF3 событие onmouseup ловит за пределами окна (если конечно мышь туда перемещается в нажатом состоянии. Ну и может дело в том что в своей реализации D&D я вешаю обработчики через addEventListener/attachEvent, чтобы не мешать другим).

А вот у IE с этим проблема (использую 6ую версию). Событие onmouseup ловится за пределами окна только в том случае если нет обработчиков в стиле document.body.onselectstart = funtion(e) {return false;}. Т.е. если работает выделение и мы его не трогаем.

Поэтому для того чтобы, D&D корректно прекращался, а не продолжался после того как кнопка была отпущена "за пределами", необходимо ловить document.[body.]onmouseover и прекращать его если не нажать левая кнопка мыши. Кстати у вас в примерах такой эффект присутствует. D&D продолжается если отжать мышь за пределами ограничивающего контейнера.


Автор: Гость (не зарегистрирован), дата: 20 июня, 2009 - 16:43
#permalink

В FF2 вполне можно отследить выход курсора за пределы окна, через relatedTarget. В IE надо делать setCapture на нужный элемент и слушать событие onlosecapture.


Автор: Gozar, дата: 8 сентября, 2011 - 15:29
#permalink

1) Попробовать предусмотреть такой нестандарт и не глюкануть сильно

Это довольно просто сделать, записываем состояние объекта и если up небыло, а down уже было, то сбрасываем перенос.


Автор: Гость (не зарегистрирован), дата: 20 июня, 2009 - 13:58
#permalink

в статье ещё не рассмотрен случай, когда элемент перетаскивается за его часть (например окно за заголовок) и не написано про обработку вытаскивания элемента за пределы окна


Автор: seyfer, дата: 23 ноября, 2012 - 06:28
#permalink

Да этого очень не хватает в статье.


Автор: Aube (не зарегистрирован), дата: 16 июля, 2009 - 04:32
#permalink

Хорошая статья. Наткнулся на нее когда писал свой drag'n'drop, уже почти все написал, осталось только определить над каким элементом находится курсор при onMouseUp и ответ как это сделать был найден именно тут.
На счет выхода курсора за пределы окна, контроля последующего клика, реакции на alt+tab.. Это уже похоже на попытку контроля хаоса. Ну в крайнем случае можно сделать отмену перетаскивания, если курсор мыши долго не меняет свои координаты. Впрочем даже это кажется мне излишним.


Автор: Алексей Кучеренко (не зарегистрирован), дата: 20 июля, 2009 - 23:17
#permalink

Автору большое спасибо за проделанный труд. Читал с удовольствием


Автор: a2l (не зарегистрирован), дата: 31 июля, 2009 - 17:34
#permalink

Спасибо за статью.

Чтобы я мог полностью использовать все преимущества этого скрипта - подскажите, как перетаскивать не картинку, а ее копию?
Хочу на базе вашей реализации сделать драг н дроп товаров в корзину.
Надо:
1. Взять мышей картинку.
2. Перетянуть ее на корзину.
При этом изображение товара - должно статично, а перетягиваться копия изображения


Автор: Илья Кантор, дата: 31 июля, 2009 - 17:57
#permalink

Нужно модифицировать код отображения перетаскивания и код завершения drag and drop.

Об этом неоднократно упоминается в статье.


Автор: a2l (не зарегистрирован), дата: 31 июля, 2009 - 18:28
#permalink

Если не трудно - подскажите.
У меня есть опыт программирования.
Но в некоторых вещах я несилен.


Автор: Андрей Параничев, дата: 4 августа, 2009 - 17:21
#permalink

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

Поскольку в скрипте отсчет позиции идет от x: 0, y: 0 для body, то такой элемент, при перетаскивании, будет появляться не в месте, где мы его "схватили", а с соответствующим смещением (между "нулями" body и родительского позиционированного элемента). Поскольку "правильное" определение элемента с позиционированием может стоить ресурсов, лучше при перетаскивании делать клон элемента, подсоединяя его к контейнеру body, таким образом обходя вышеуказанную проблему и возможную проблему с вложенностью.


Автор: seyfer, дата: 23 ноября, 2012 - 06:30
#permalink

Можно брать offsetХ и У контейнера и прибавлять к координатам.


Автор: seyfer, дата: 23 ноября, 2012 - 06:30
#permalink

Можно брать offsetХ и У контейнера и прибавлять к координатам.


Автор: Альберт (не зарегистрирован), дата: 30 августа, 2009 - 12:26
#permalink

Уважаемый Илья Кантор! Огромное спасибо Вам за этот ресурс, по-моему, это лучшее, что есть по javascript. Все информация излагается доступно, с логикой развития, полно, с наглядными работающими красивыми примерами!!! Потрясающе!


Автор: Илья Кантор, дата: 30 августа, 2009 - 16:43
#permalink

Может, сделать отдельный тип комментариев "спасибо" ? Конечно, я рад, что мой труд кому-то пригодился, но такие комментарии не добавляют полезности статье..


Автор: Nix (не зарегистрирован), дата: 22 сентября, 2009 - 11:36
#permalink

Спасибо автору, фреймворк очень компактный.
Правда процессор грузит в среднем также как jQuery.ui Drag&Drop. Использовать не так удобно как jQuery.ui
Для повышения удобства и универсальности достаточно вынести функцию обработки дропа из фреймворка на пользовательскую страницу, как это сделано в jQuery.ui

<script type="text/javascript">
  $(document).ready(function(){
    $("#draggable").draggable();
    $("#droppable").droppable({
      drop: function() { alert('dropped'); }
    });
  });
  </script>

Как это сделать догадается далеко не каждый.


Автор: Илья Кантор, дата: 23 сентября, 2009 - 00:08
#permalink

Добрый день,

Статья совсем не ставит целью заменить jquery ui, dojo dijit и прочие фреймворки. Конечно, вы можете адаптировать код под свои нужды или адаптировать поправить тот же jquery ui, используя информацию из статьи.

Успехов вам.


Автор: Hurley (не зарегистрирован), дата: 22 сентября, 2009 - 18:34
#permalink

Здраствуйте, очень много нового для меня в этой статье! Дочитал пока до параграфа "Опускаем элемент" а уже возникло несколько вопросов:

1. не понятен синтаксис

e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )

это же одно и то же что и выражение ниже?

if (e.button==true & 1)
{
e.which = 1
}
else
{
( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
}

как расшифровать ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) ) ???

2. Это ошибка чи нет? Подпараграф "Начало движения: сохранение позиции курсора в элементе"

document.onmousemove = function(e) {
e = fixEvent(e)
...
element.style.left = e.pageX + mouseOffset.x + 'px'
element.style.top = e.pageY + mouseOffset.y + 'px'
...
}

Должно быть наверное ж

document.onmousemove = function(e) {
e = fixEvent(e)
...
element.style.left = e.pageX - mouseOffset.x + 'px'
element.style.top = e.pageY - mouseOffset.y + 'px'
...
}

3. Подпараграф "Демо"

var dragMaster = (

function() {

...код...

} ()
)

для чего выделенные жирным скобки?

4. Интересна функция getPosition, понятно что все работает и этого должно быть мне достаточно:), но если не сложно можете объяснить некоторые моменты:

while (e.offsetParent){
left += e.offsetLeft
top += e.offsetTop
e = e.offsetParent
}

Допустим есть такая конструкция

<div class="test">
<div id="dragElem">
</div>
</div>

В файрбаге я смотрю по dom модели, что свойство offsetParent для дива dragElem = div.test

делаю так

while (e.offsetParent){
left += e.offsetLeft
top += e.offsetTop
e = e.offsetParent
alert(e.offsetParent)
}

и он мне выводит первый раз [object HTMLBodyElement], а второй раз null

что это за прикол? кроссбраузерные глюки?

Заранее спасибо


Автор: Илья Кантор, дата: 14 октября, 2009 - 16:25
#permalink

1. Добавил комментарий об этом в статью. & - это логическое И.
2. Да, опечатка, поправил.
3. Таким образом мы объявляем и тут же создаем объект-синглтон.
4. Что непонятного? IE выводит что-то другое? Вы берете элемент, у которого нет offsetParent (родительского по offset элемента). Естественно, выходит null...


Автор: mailman (не зарегистрирован), дата: 16 октября, 2009 - 06:41
#permalink

Насчет поправки к скролингу, можно примерно так:

function mouseMove(e) {
  e = fixEvent(e);
  // ...
  xPos = parseInt((e) ? e.pageX : event.clientX + document.body.scrollLeft);
  yPos = parseInt((e) ? e.pageY : event.clientY + document.body.scrollTop);
  // ...
}

Автор: Илья Кантор, дата: 16 октября, 2009 - 09:26
#permalink

С виду - ошибочка: (e) ? e.pageY : event.clientY --- переменная e всегда задана после fixEvent.


Автор: mailman (не зарегистрирован), дата: 17 октября, 2009 - 09:18
#permalink

Да, упистил там, я имел в виду, что те две строчки эквивалентны fixEvent, такое может быть? Точнее по части контроля за скролами.

Что будет если на эту страницу поместить iframe - как будут себя вести перетаскиваемые элементы при перемещении над ним?


Автор: B~Vladi, дата: 19 октября, 2009 - 16:27
#permalink

Не указан один важный момент. Для Драг&Дропа необходимо заставлять браузер перерисовывать страницу при mouseover. Это в библиотеке просисходит, но для других целей. Заставить перерисовать страницу можно простым обращением к свойству DOM-элемента, которое заставит браузер что-то вычислить:

ele.offsetTop

Не все свойства DOM-элемента подходят для этого, например style.top, т.к. это по-сути всего лишь получение уже установленного значения. В сложный интерфейсах этот момент может сыграть чуть ли не самую важную роль.


Автор: scoute (не зарегистрирован), дата: 10 февраля, 2010 - 13:52
#permalink

Да уж, перетаскивание клона картинки - полезная штука,
а можно ли выложить полный код? А то изменения применил,
но не работает ...
то картинку вообще сдвинуть нельзя, то днд отключается,
и картинка тянется браузером, а не скриптом.


Автор: Сударчиков Андрей (не зарегистрирован), дата: 15 февраля, 2010 - 18:43
#permalink

Здравствуйте!
Спасибо полезно, применяю.
Есть вопрос:
У меня перетаскиваемый объект содержит html код (текст картинки и т.д.) он в контейнере table td. (таблицей нарисовано обрамление содержания)
В js новичОк, не могу сделать так чтобы таскать только за область границы вокруг.
При этом по mousedown на контенте контейнера не таскать но выделять текст.
вот пример
http://webpokaz.ru/media/test/testgallery.html
И еще одно, после нескольких внесенных исправлений повесил ИЕ...
В этой версии, при том что локально все работает, выложил в нет и ИЕ повис.
Рассмотрите пожалуйста мой пример. Очень надеюсь на вашу помощь


Автор: sldizz (не зарегистрирован), дата: 23 февраля, 2010 - 18:58
#permalink

Я только что столкнулся с данной проблемой - мне необходимо было иметь возможность перетаскивать всплывающее окошко:

<div id="popup" style="border: solid 1px #000000;">
	<div class="dTitle" id="dTitle">Popup</div>
	<div class="dBody">
		<p class="dText">
			The relevant FIX connections are setup in the FIX Gateway b/w the FIX 5.0 VeriFIX receiver (outbound) and RTNS GID.logs (inbound)
			The relevant FIX connections are setup in the FIX Gateway b/w the FIX 5.0 VeriFIX receiver (outbound) and RTNS GID.logs (inbound)
		</p>
		<button style="clear:both;" type="button" onClick="layerClose();">
			Close
		</button>
	</div>
</div><script>
dragMaster.makeDraggable(document.getElementById('dTitle'))
</script>

Так вот, для того, чтобы беспроблемно таскать это всплывающее окошко, я просто подставил в вызове не его само, а его хэдер, т.е. в данном случае dTitle, а в самом скрипте сделал так:

...
function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		dragObject  = this.parentNode; // изначально было dragObject  = this
...

В моем случае помогло, надеюсь, поможет и вам


Автор: Netic (не зарегистрирован), дата: 25 марта, 2010 - 21:54
#permalink

я тут задумался, интересно, как можно сделать так, задать акцептеру например класс объектов, которые он может принимать

например:

new DropTarget(objElement1, 'items');

типа того, т.е. акцептер object будет принимать в себя только объекты имеющие класс items

точно так же, объектом которым мы говорим драгиться, что им можно располагаться тока в акцептеры

new DragObject(objItem, 'element1');

Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 17:28
#permalink

Всего лишь проверять перед тем или иным действием свойство className объекта.


Автор: dimanlin (не зарегистрирован), дата: 23 апреля, 2010 - 01:45
#permalink

Вот эщто действительно хорошая статья по переносу объектов.! респект!


Автор: hoid, дата: 29 апреля, 2010 - 01:58
#permalink

Здесь возвращается позиция элемента относительно документа

function getPosition(e){
62	    var left = 0
63	    var top  = 0
64	 
65	    while (e.offsetParent){
66	        left += e.offsetLeft
67	        top  += e.offsetTop
68	        e    = e.offsetParent
69	    }
70	 
71	    left += e.offsetLeft
72	    top  += e.offsetTop
73	 
74	    return {x:left, y:top}
75	}

а тут элементу назначаются координаты относительно родительского элемента

with(dragObject.style) {
26	            position = 'absolute'
27	            top = e.pageY - mouseOffset.y + 'px'
28	            left = e.pageX - mouseOffset.x + 'px'
29	        }

и если задать родительскому элементу position, перетаскиваемый прыгает
в исходном файле demo.html я приписал позицию для дива

<html>
<body>
<script src="DragObject.js"></script>
<script src="DropTarget.js"></script>
<script src="dragMaster.js"></script>
<script src="helpers.js"></script>
<style>
.uponMe { background-color: red; }
</style>

<div id="dragObjects" <em>style="position:absolute; left: 400px; top: 400px"</em>>
<img src="img/piki.gif" id="piki"/>
<img src="img/bubi.gif" id="bubi"/>
<img src="img/trefi.gif" id="trefi"/>
<img src="img/chervi.gif" id="chervi"/>
</div>
<img src="img/trash.gif" style="margin-left:100px" id="trash"/>

<script>
onload = function() {
    var dragObjects = document.getElementById('dragObjects').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        new DragObject(dragObjects[i])
    }
    
    new DropTarget(document.getElementById('trash'))
    
}
</script>

    
</body>
</html>

Автор: Rast-security, дата: 30 апреля, 2010 - 23:42
#permalink

так и чешутся руки скрипты украсть!


Автор: Макс M (не зарегистрирован), дата: 19 мая, 2010 - 14:36
#permalink

Полный JS решение проблемы с input ами

function mouseDown(e) {
		e = fixEvent(e);
		if (e.which!=1) return

		
 		mouseDownAt = { x: e.pageX, y: e.pageY, element: this }


		var elem = document.elementFromPoint(mouseDownAt.x,mouseDownAt.y);
		// запрет на перемещение input
		if (elem.tagName) 
			{
			if(elem.tagName=='INPUT') 
				{ 
				if (!el.focus) 
					{
					elem.focus(); 
					}
				return false; 
				}
			}

		addDocumentEventHandlers();
		
		return false
	}

Автор: Виталий Филиппов (не зарегистрирован), дата: 19 мая, 2010 - 19:04
#permalink

Статья действительно супер, но добавлю пару замечаний.
Во-первых, по поводу pageX/Y и clientX/Y: Chrome и Opera 10.5 уже тоже использует clientX/Y, по крайней мере с ним всё работает корректно. Для Opera < 10.5 действительно требуется pageX/Y, но это, по-видимому, единственное исключением из правила, т.к. Opera 10.5 с pageX/Y уже работает некорректно при прокрутке страницы. Как себя ведёт Safari - не смотрел, но учитывая, что это тоже WebKit, подозреваю, что тоже может работать с clientX/Y.
А в Konqueror'е, например, вообще нет метода elementFromPoint. Чем бы его заменить?
Во-вторых, по поводу объектной модели DragObject: те методы, которые у вас "onXXX", я бы назвал просто "xXX", и добавил бы в них if (this.onXXX) onXXX(...), чтобы легче было добавлять в объект обработчики событий. И кроме того, по умолчанию сделал бы восстановление позиции элемента при успешном drag&drop'е, если пользователь захочет - нехай переопределяет.
В-третьих, по поводу используемых локальных переменных - мне кажется логичнее их засунуть в объект (не var element, а this.element = ...), чтобы потом их легко было достать из тех же обработчиков событий, например.
С этими доработками получается уже вполне приличная, но в то же время лёгкая библиотека для drag&drop'а)
DragHelpers.js
DragObject.js
DragMaster.js
DropTarget.js

P.S: тут в редакторе во "вставке ссылки" не работает текст, вставляется ссылка без текста внутри.


Автор: Маэстро (не зарегистрирован), дата: 8 июня, 2010 - 14:34
#permalink

Илья, спасибо за умную статью. На основе Вашего материала построил свой сайт.
Но вот столкнулся с проблемой: если перетаскиваемый объект (в примере картинка img/piki.gif) заключены в html-ссылку, например:
[a target=_blank href=http://mysite.com][img src="img/piki.gif" id="piki"/][/a]
то после перетаскивания такой картинки броузеры ведут себя по-разному.
В частности, Google Hrome после перетаскивания открывает новую вкладку, т.е. отрабатывает тег [a]. Как бы предотвратить это? То есть, клик по картинке должен отправлять пользователя по адресу, указанному в href... Но если пользователь только переместил картинку, то перехода быть НЕ должно.


Автор: Маэстро (не зарегистрирован), дата: 8 июня, 2010 - 14:52
#permalink

Виталию Филиппову:
в Вашем сообщении все ссылки указывают на один и тот же файл DragHelpers.js
как скачать другие?


Автор: Маэстро (не зарегистрирован), дата: 8 июня, 2010 - 14:57
#permalink

Илья, спасибо за умную статью. На основе Вашего материала построил свой сайт.
Но вот столкнулся с проблемой: если перетаскиваемый объект (в примере картинка img/piki.gif) заключены в html-ссылку, например:
(a target=_blank href=http://mysite.com)(img src="img/piki.gif" id="piki"/)(/a)
то после перетаскивания такой картинки броузеры ведут себя по-разному.
В частности, Google Hrome после перетаскивания открывает новую вкладку, т.е. отрабатывает тег (a).
Как бы предотвратить это? То есть, клик по картинке должен отправлять пользователя по адресу, указанному в href... но если пользователь только переместил картинку, то перехода быть НЕ должно.


Автор: Илья Кантор, дата: 16 июля, 2010 - 18:39
#permalink

Чтобы перехода не было - нужно отменять реакцию браузера по умолчанию для события на элементе a используя preventDefault.


Автор: Гость (не зарегистрирован), дата: 24 июня, 2011 - 20:37
#permalink

А как отменить срабатывание onclick? C атрибутом href проблем нет, а вот onclick никак не могу побороть.


Автор: Гость (не зарегистрирован), дата: 14 июня, 2010 - 01:02
#permalink

Использую эти скрипты для DnD. Очень сильно грузять процессор. Под FF и Chrome еще как-то шевелятся(95%), а под IE вначале перетаскивания проц загружается на 100% и по этой причине объект не визуализируется, ему просто некогда. Это происходит даже если после начала движения просто остановить мышку но не отпускать левую клавишу. Постоянно срабатывает событие mousemove, хотя движения мышкой нет. В чем может быть причина? Если не победю придется на другой фреймоворк переходить, а это месяц отладки.


Автор: Илья Кантор, дата: 16 июля, 2010 - 18:40
#permalink

Очень странно что событие mousemove срабатывает без движения мышкой. Не бывает такого..


Автор: Enpire (не зарегистрирован), дата: 3 августа, 2010 - 12:30
#permalink

Мне кажется, что к проверке прав второго типа (асинхронный запрос) надо добавить предварительную проверку прав на всех объектах, которые могут быть перетаскиваемыми, на этапе формирования страницы (PHP).

Например, если у нас есть сотня объектов трех типов, мы можем выделить эти типы. И у нас есть авторизованный (или неавторизованный, гость) пользователь, у которого есть права. Для каждого типа объектов проверяются права на перенос - да, нет. Всего лишь булевая переменная, которая добавляется в свое свойство объекту. Таким образом мы отсекаем бОльшую часть "отбракованных" переносов еще до их совершения. Кстати абсолютное большинство "отбракованных" переносов будет говорить о попытках изменить что то в коде страницы и получить доступ к запрещенным элементам: если проект - онлайн-игра, такому пользователю можно выносить предупреждение, и знать, что от него можно ждать попыток эксплоитов и багоюзерства =)


Автор: e.kubyshin, дата: 11 августа, 2010 - 15:32
#permalink

сдается мне что если dran-n-drop элемент будет находится в блоке с position:relative, то не правильное поведение будет при перемещениии


Автор: MikhailGirshberg, дата: 19 августа, 2010 - 11:27
#permalink

Safari не дропает в примерах итогового фреймворка...


Автор: Pol_uha (не зарегистрирован), дата: 7 октября, 2010 - 11:35
#permalink

Спасибо за статью!
Но вот глюк...
Взял за основу пример с 2-мя вложенными дивами.
если на странице с примером появляется полоса прокрутки вниз
То в Opera прокрутив чуть чуть и попробовав перенести, меняется позиция droptarget, а именно становится выше реального((( Подскажите?


Автор: Kostya (не зарегистрирован), дата: 15 октября, 2010 - 00:18
#permalink

Вопрос:
А как можно сделать сразу все объекты передвигаемыми? Т.е. сделать это до того как их в первый раз передвинут?


Автор: Гость (не зарегистрирован), дата: 19 октября, 2010 - 23:11
#permalink

есть одна проблема с получением координат мыши отномительно документа: при нахождении мыши над обьектом со свойством position:fixed; в интернет эксплорере значение координат остается не определенным.. как можно это исправить?


Автор: Гость (не зарегистрирован), дата: 8 декабря, 2010 - 10:17
#permalink

а ни кто не встречал библиотеки драг анд дроб сразу с записью в кукис?


Автор: Гость (не зарегистрирован), дата: 8 декабря, 2010 - 10:25
#permalink

а ни кто не встречал библиотеки драг анд дроб сразу с записью в кукис?


Автор: Гость (не зарегистрирован), дата: 8 декабря, 2010 - 10:26
#permalink

А с записью в кукис таких библиотек ни кто не встречал?


Автор: poorking, дата: 11 декабря, 2010 - 23:27
#permalink

Мне вот интересно насчет дропа между элементами. Чтобы делить акцепторы на 2 части, для определения выше или ниже будет дропаться элемент, нужно знать его высоту, которую можно снять c помощью getComputedStyle, но подобный метод для IE (currentStyle) вернет "auto" если высота нигде не задана, и как же тогда быть, если все элементы "списка" (подразумевается некий набор блочных элементов) разной высоты, которая нигде не задана, а зависит от количества контента блока.


Автор: Ян (не зарегистрирован), дата: 15 декабря, 2010 - 00:19
#permalink

Интересно, конечно, но вот практическая применимость сего на сегодня мне кажется сомнительной. Точнее, в некоторых браузерах работать будет, в некоторых (пусть это считаные проценты пользователей) будут одни глюки.

Мне самому хотелось бы кой-чего замутить (не без драг-н-дропа), но как прикину, сколько на это времени уйдёт, чтобы хотя бы в паре основных браузеров работало без нареканий, так руки и опускаются. Тут уже перечислили выход мышки за пределы окна и т.д. с комментариями "если пользователь это делает, то он морально готов к глюкам".

Даже не знаю, как это комментировать. Если вы наворачиваете на сайт свистулек и чего там ещё, нужно добиваться того, чтобы с ними результат был лучше, чем без них. Зачем нужны свистульки, если из-за них у пользователя заглючит интерфейс? При чём не просто какая-нибудь картинка на полсантиметра в сторону съедет, а вообще страницу заклинит.

Если же вы не можете обеспечить безглючную работу задуманного - не беритесь.

"Надо там ещё додумать, надо там ещё доделать, ещё пользователь может вот так, ну это всё равно, а может ещё и так, ну и плевать, пусть развалится."

"Вот вечно у нас так всё, на авось, авось не всплывёт, небось и так сойдёт, везде халтура. А я хочу, чтобы наша липовая печать была лучшей печатью во всей прокуратуре!"

Если бы автомат калашникова клинило в тот момент, когда пользователь "должен быть морально готов к глюкам" - был бы он брендом номер один в своей области?


Автор: yan (не зарегистрирован), дата: 15 декабря, 2010 - 14:14
#permalink

Уважаемый Илья. Очень прошу уточнить как вместо alert произвести асинхронный запрос. И самое главное как после того как, dragObject будет отпушен на акцепторе
запретить ему Drag and drop?????


Автор: jetli13, дата: 19 января, 2011 - 13:55
#permalink

А как быть с глюком в ie...
Последовательность:
хватаем сердечко из примера
http://javascript.ru/ui/draganddrop#demo-4

ведем его до верхней границе окна
неотпуская мыши уводим ее за границу окна и там отжимаем клавишу мыши. Сердечко при этом осталось около границы. Далее возвращаем курсор в область окна и сердечко продолжает двигаться за курсосром....


Автор: Гость (не зарегистрирован), дата: 23 января, 2011 - 08:22
#permalink

Ребят, сколько ни ковыряю, что-то не могу разобрать. Можно ли устанавливать значения ClientX/ClientY (pageX/pageY), а не просто получать их? Подскажите, для примера, функцию, автоматизирующую некоторое перетаскивание:
1. Устанавливаются заданные координаты Х,Y (150, 250)
2. Происходит нажатие левой кнопки мыши
3. Устанавливаются другие координаты (200,300)
4. Происходит отпускание кнопки
Это бы всё расставило на свои места, заранее благодарю.


Автор: Гость (не зарегистрирован), дата: 30 января, 2011 - 01:21
#permalink

цель драг-дропа можно определять onouseover целей я думаю


Автор: gyrdym, дата: 16 сентября, 2011 - 15:29
#permalink

статейка понравилась, переделал данный фреймворк под touch-событийную модель, проверил на ipad-е и андроиде, без тормозов пашет, пальцем перемещаются элементы


Автор: ЛенаЛена (не зарегистрирован), дата: 9 ноября, 2011 - 17:14
#permalink

Подскажите, как вы переделали событие mousemove?
И если не сложно, можно посмотреть код?


Автор: gyrdym, дата: 23 февраля, 2012 - 12:45
#permalink

onmousemove == ontouchmove


Автор: Гость (не зарегистрирован), дата: 15 декабря, 2011 - 17:19
#permalink

Заметил баг - если быстро перемещать элемент и отпустить кнопку мыши не над элементом, который сейчас перемещается, то dragObject у элемента становится равным null. Не могу понять из-за чего это может быть, подскажите плиз куда копать.


Автор: Гость (не зарегистрирован), дата: 16 декабря, 2011 - 14:15
#permalink

Разобрался, то я затупил)


Автор: Гость (не зарегистрирован), дата: 3 февраля, 2012 - 14:44
#permalink

А как закрепить место за объектом после перемещения?
Чтоб при последующей загрузке страницы объекты были на тех позициях, куда их переместил пользователь?


Автор: Чан (не зарегистрирован), дата: 27 февраля, 2012 - 01:36
#permalink

backgr.png - прозрачный фон, типа щелкаешь на див и на весь экран растягивается другой див с прозрачным фоном на котором работают онмоусмув применительно к первому элементу, двигаешь в большом а двигается маленький Х)
Одни минусы, но круто ведь )


Автор: cyber, дата: 13 мая, 2012 - 19:44
#permalink

ОГРОМНОЕ спасибо , статья тяжелая после ее прочтение 90% не понял , НО это помогло мне взглянуть с другой стороны на JS , благодаря ей поменя стиль написания кода.


Автор: Creator (не зарегистрирован), дата: 27 ноября, 2012 - 19:04
#permalink

Спасибо!

А вот я работаю с формами в проекте и web-технологии плохо знаю. Можно сделать так чтобы из опшыны перетаскивались в другие поля ввода по вашей методике?.. т.е. заполнять поля ввода перетаскивая элементы из списка или таблицы?


Автор: Всеволод (не зарегистрирован), дата: 9 декабря, 2012 - 00:24
#permalink

Добрый вечер. А я вот заметил, что метод document.elementFromPoint(x,y) во всех браузерах сейчас ведет себя одинаково. В смысле везде принимает clientX/Y.

Пример
var x = e.clientX,//e.pageX - window.pageXOffset,
y = e.clientY//e.pageY - window.pageYOffset,
element = document.elementFromPoint(x, y);
проверял в Ie9, ff 17, chrome 23, opera 12, стандартный браузер android (версия браузера 4.0.4) , dolphin browser 9.0.1 ... кто-нибудь может проверить на ios ? скорей всего там все хорошо, но хотелось бы точно знать


Автор: G.Nerc (не зарегистрирован), дата: 17 марта, 2013 - 11:00
#permalink

Илья, спасибо огромное за отличную разжёванную до мелочей статью!
Я у себя в проекте использую твой код (финал). У меня также используется для вывода тултипов маленькая библиотека qtip. Так вот после того как я перемещаю с помощью твоего решения объект, все тултипы начинают показываться с каким-то диким смещением.
Пробовал вникнуть почему может происходить, не смог. Можешь помочь куда копнуть чтобы починить это?


Автор: madfan41k (не зарегистрирован), дата: 5 апреля, 2013 - 00:29
#permalink

Здравствуйте, подскажите почему у меня в этом коде

function getCurrentTarget(e)
	{
        var x;
        var y;
        var elem;
		
		dragObject.hide();
		
		if (navigator.userAgent.match('MSIE') || navigator.userAgent.match('Gecko'))
		{
			var elem = document.elementFromPoint(e.clientX,e.clientY)
		}
		else
		{
			var elem = document.elementFromPoint(getMouseX(e),getMouseY(e))
		}

		dragObject.show();

		while (elem != null ) {
			if (elem.dropTarget && elem.dropTarget.canAccept(dragObject)) 
			{
				return elem.dropTarget
			}
			elem = elem.parentNode
		}

		return null;
	}

elem для ИЕ 8 всегда null ?

За ранее спасибо


Автор: Андрейка123 (не зарегистрирован), дата: 15 ноября, 2013 - 12:38
#permalink

Добрый день, воспользовался Вашим скриптом, очень понравилось, большое Вам спасибо.
Но возник вопрос, как вернуть элемент туда откуда взял?


Автор: jei, дата: 18 ноября, 2013 - 22:46
#permalink

млять автор штмл чо не выложил куда что в самом начале не.... не понятно.Исходники где для начальных примеров.


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2014 - 11:16
#permalink

Учите сперва основы, раз не можете понять элементарные вещи.


Автор: Гость (не зарегистрирован), дата: 20 марта, 2014 - 17:19
#permalink

Огромное спасибо!


Автор: Гость (не зарегистрирован), дата: 22 октября, 2014 - 07:07
#permalink

Ребят, помогите, не могу понять, где нужно значение поменять или что-то подправить. Вопрос в след. Если у элементов сразу абсолютное позиционирование то при нажатие элемент от курсора очень далеко, но всё остальное работает. Где исправить это?


Автор: Гость (не зарегистрирован), дата: 5 декабря, 2014 - 12:58
#permalink

Добрый день.
Не могу разобраться с переносом "между". Смысл задачи в том, что у меня в одном divе рандомно генерируются какое то количество html элементов и их нужно уметь перетаскивать в другой div. C самим переносом и обычным дропом разобрался, добавляю во второй div с помощью appendChild, соответственно элементы добавляются просто в конец. Проблема в том как добавить не в конец, а в любое другое место. Может кто-нибудь помочь разобраться?


Автор: Гость (не зарегистрирован), дата: 27 февраля, 2015 - 00:39
#permalink

Спасибо, большое Илья за статью, но у меня никак не получается при перетаскивании объекта на принимающем заставить исчезать тект или блок с текстом. К примеру: в примере с nested.html есть блок drop - как сделать так, чтобы при перетягивании на него объекта в момент отпускания кнопки мыши он исчезал?


Автор: новичек (не зарегистрирован), дата: 27 октября, 2015 - 04:06
#permalink
<style type="text/css">
        div.dragElement {font-size: large; border: thin solid black; padding:16px;
            width: 8em; text-align: center; background-color: lightgray; margin: 4px }
		#container { border: medium double black; width: 700px; height: 450px}
    </style>
    <script type="text/javascript">
$(function() {

    $('.dragElement').draggable({
        containment: "parent"
    }).mousemove(function(){
						var coord = $(this).position();
						$("p:last").text( "left: " + coord.left + ",id: " + coord.id + ", top: " + coord.top );
						 alert('Квадрат с ID "' + draggable.attr('id') + '" был доставлен к месту назначения!');
		 }).mouseup(function(){
				var coords=[];
				var coord = $(this).position();
				var item={ coordTop:  coord.left, coordLeft: coord.top  };
			   	coords.push(item);
				var order = { coords: coords };
				$.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
						if(response == "success")
							$("#respond").html('<div class="success">X and Y Coordinates Saved!</div>').hide().fadeIn(1000);
							setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
						})

				});


});
    </script>
</head>
<body>
    <div id="container">

<?=

 $req = mysql_query("SELECT * FROM `table` WHERE `ref` = '1' ORDER BY `reallid` LIMIT 3;");
while ($res = mysql_fetch_array($req)) {
$i++;


    echo '  <div id="dragH_'.$res['uid'].'"  uid="dragH" class="dragElement ui-widget ui-corner-all ui-state-error">
           <img src="images/zdaneya/'.$res['uid'].'_1.png" width="" height="" alt="" border="0">
        </div>';

}




 ?>


    </div>
</body>
</html>

Подскажите как получить содержимое id="dragH_'.$res['uid'].'" после окончания перемешения элемента, хочу организовать запись этих данных в BD но не могу получить индефикатор перетаскиваемой записи для дальнейшева сохранения с новыми координатами:(


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 3 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum