Перетаскивание объектов

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Все объекты, которые вы можете перемещать на этом сайте - непосредственная работа функции-плагина VcorpJS.dragDrop()
(вы можете потаскать зелёный квадратик в левом нижнем углу экрана, посмотреть его через средства разработчика в браузере).

Функция-плагин VcorpJS.dragDrop() перемещает объекты «как есть», НЕ используя технологию «drag and drop» браузеров, поэтому перемещаемые объекты выглядят самими собой на 100%. Основные функции этого плагина заключаются во внутренней поддержке галереи изображений и оконной системы (включая сенсорные экраны), плагин интегрирован в VcorpJS, попутно предоставляя возможность перемещать любые указанные объекты.

Для перетаскивания любого объекта на веб-странице, необходимо выполнить 2 условия:

установить стиль position : absolute / fixed для перетаскиваемого объекта
добавить обработчик события mousedown и/или touchstart на требуемый объект или его часть

Обработчиком события должна быть функция .dragDrop().
Во время работы функция создаёт временные обработчики «mousemove»/«mouseup» или «touchmove»/«touchend» объекта document (VcorpJS.D), для отслеживания перемещения и окончания перемещения. При окончании перетаскивания объекта, временные обработчики автоматически удаляются

При перетаскивании объектов они имеют zIndex : 250 для изображений и обычных окон, 299 для модального окна сообщения, 297 или более для всех прочих объектов (включая модальное диалоговое окно). Если исходный zIndex перетаскиваемого объекта выше 297, то он остаётся без изменения.

.gDD()

Возвращает 1, если происходит перемещение объекта (не завершённый Drag-Drop), или 0.
Знать об этом бывает полезно при выборе действий в функции, вызываемой через requestAnimationFrame(), например, не вызывать 3D-рендеринг, когда нет изменений. Подробности см. 3D графика - уменьшение нагрузки на процессор.

.dragDrop( event, node [ , handler ] )

Перемещение пользователем объекта node в пределах окна браузера или родительского элемента.

event - это передаваемый браузером объект события.

node - ссылка на перемещаемый HTML-объект или его текстовый id

handler - это callbak-функция, вызываемая в трёх случаях:

один раз при касании пальца или нажатии кнопки мыши (touchstart или mousedown)
перемещение объекта (touchmove или mousemove)
один раз при отпускании пальца или кнопки мыши (touchend или mouseup)

Формат вызова: function( event, left, top, width, height ); где:

this - ссылка на перетаскиваемый объект
event - объект события ( mousedown / touchstart или mousemove / touchmove или mouseup / touchend )
left, top, width, height - текущие координаты и размеры перетаскиваемого объекта node

handler может быть текстовой строкой кода (см. правила для callbak - функций).

Если у родительского объекта указать CSS-значение overflow:hidden, то перетаскиваемый объект не будет виден за пределами родительского блока.

<div
class="myHeader"
onmousedown="VcorpJS.dragDrop(event, this.parentNode)"
ontouchstart="VcorpJS.dragDrop(event, this.parentNode)"
>
...
</div>

Если количество перемещаемых блоков заранее неизвестно, или в HTML-коде обработчики не нужны, то можно их «навесить» отдельно:

/* пример установки обработчика для всех элементов класса "myHeader" */
var $ = VcorpJS;
var myArray = Array.prototype.slice.call( $.qSA(".myHeader") );
$.addEH( "touchstart", myDragDrop, myArray );
$.addEH( "mousedown", myDragDrop, myArray );
...
function myDragDrop(e) {
$.dragDrop(e, this.parentNode, myFunc);
}
...
function myFunc(e, left, top, width, height) {
if (e.type=="touchend" || e.type=="mouseup") {
var txt = $.gMouseX() + " " + $.gMouseY();
alert(txt + "\n" + left + " " + top + " " + width + " " + height);
}
}

Странно, на этой странице w3c - валидатор ругается на атрибут "ontouchstart", при этом не ругается на атрибут "onmousedown", да и на теги <menu>, которые были временно исключены из стандарта html4, выдаёт предупреждения (на html5 странице!), хотя автор не видел ни одного браузера, который-бы не поддерживал теги <menu>. Получается, даже w3c-валидатор не идеален. Автор специально оставил "некорректный" атрибут, чтобы вы могли убедиться, что на мобильных браузерах это прекрасно работает.

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