Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
Большинство из вас, наверное, уже видели, как на некоторых сайтах, различные элементы HTML-верстки можно «ухватить мышой» и перетащить в другое место на странице. Это называется «drag and drop», а если дословно, то «схвати и тащи». В статье я расскажу, как, при помощи небольшого куска кода на Javascript, реализовать подобный функционал на своём сайте. Итак, поехали. Во-первых, для того, чтобы объекты на страницы могли свободно перемащаться, независимо от соседних элементов, мы выставим им абсолютное позиционирование (position:absolute) и начальные координаты (left и top) в CSS. Во-вторых, главным участником всех действий в JS, послужит конечно-же стандартный объект window.event, при помощи которого мы будет определять координаты объекта. В целом, замысел будет таков: по клику левой кнопкой мыши на объекте мы устанавливаем «флаг» (obj.clicked = true) на объект (HTML DOM-элемент), означающий что «объект выбран и можно инициализировать его перемещение». В дальнейшем, после этого действия, все перемещения указателя по экрану на странице сайта, будет отрабатывать метод document.onmousemove, в котором мы: получаем новые координаты перемещаемого объекта, меняем его позицию для «left и top» CSS-свойств. Для клика по объекту, будет использовано событие onmousedown, вместо onclick, т.к оно срабатывает раньше и не требует отпускания кнопки мыши. После того, как мы переместили объект в нужную позицию на странице и отпустили кнопку мыши, срабатывает событие document.onmouseup и убирает значение флага (obj.clicked = false). Также, для того чтобы избежать всяческих глюков с тем, когда при перемещении объекта браузер по умолчанию обрабатывает свои встроенные события, мы будем вызывать метод объекта event — preventDefault(). Данный скрипт тестировался и отлично себя повел в Opera 9+, Firefox 2+, Safari 2, Google Chrome, а вот в IE (6,7) хотя перетаскивание и работает, но довольно-таки глючно (в этих версиях IE у объекта event нету метода preventDefault, хотя есть свойство returnValue, что должно выполнять посути туже функцию, но оно почему-то не помогло). Между head вставляем:
// флаг, которые отвечает за то, что мы кликнули по объекту (готовность к перетаскиванию)
obj.clicked = true;
// устанавливаем первоначальные значения координат объекта
obj.mousePosX = evt.clientX;
obj.mousePosY = evt.clientY;
// отключаем обработку событий по умолчанию, связанных с перемещением блока (это убирает глюки с выделением текста в других HTML-блоках, когда мы перемещаем объект)
if( evt.preventDefault ) evt.preventDefault();
else evt.returnValue = false;
// когда мы отпускаем кнопку мыши, убираем «проверочный флаг»
Большинство из вас, наверное, уже видели, как на некоторых сайтах, различные элементы HTML-верстки можно «ухватить мышой» и перетащить в другое место на странице. Это называется «drag and drop», а если дословно, то «схвати и тащи». В статье я расскажу, как, при помощи небольшого куска кода на Javascript, реализовать подобный функционал на своём сайте. Итак, поехали. Во-первых, для того, чтобы объекты на страницы могли свободно перемащаться, независимо от соседних элементов, мы выставим им абсолютное позиционирование (position:absolute) и начальные координаты (left и top) в CSS. Во-вторых, главным участником всех действий в JS, послужит конечно-же стандартный объект window.event, при помощи которого мы будет определять координаты объекта. В целом, замысел будет таков: по клику левой кнопкой мыши на объекте мы устанавливаем «флаг» (obj.clicked = true) на объект (HTML DOM-элемент), означающий что «объект выбран и можно инициализировать его перемещение». В дальнейшем, после этого действия, все перемещения указателя по экрану на странице сайта, будет отрабатывать метод document.onmousemove, в котором мы: получаем новые координаты перемещаемого объекта, меняем его позицию для «left и top» CSS-свойств. Для клика по объекту, будет использовано событие onmousedown, вместо onclick, т.к оно срабатывает раньше и не требует отпускания кнопки мыши. После того, как мы переместили объект в нужную позицию на странице и отпустили кнопку мыши, срабатывает событие document.onmouseup и убирает значение флага (obj.clicked = false). Также, для того чтобы избежать всяческих глюков с тем, когда при перемещении объекта браузер по умолчанию обрабатывает свои встроенные события, мы будем вызывать метод объекта event — preventDefault(). Данный скрипт тестировался и отлично себя повел в Opera 9+, Firefox 2+, Safari 2, Google Chrome, а вот в IE (6,7) хотя перетаскивание и работает, но довольно-таки глючно (в этих версиях IE у объекта event нету метода preventDefault, хотя есть свойство returnValue, что должно выполнять посути туже функцию, но оно почему-то не помогло). Между head вставляем:
// флаг, которые отвечает за то, что мы кликнули по объекту (готовность к перетаскиванию)
obj.clicked = true;
// устанавливаем первоначальные значения координат объекта
obj.mousePosX = evt.clientX;
obj.mousePosY = evt.clientY;
// отключаем обработку событий по умолчанию, связанных с перемещением блока (это убирает глюки с выделением текста в других HTML-блоках, когда мы перемещаем объект)
if( evt.preventDefault ) evt.preventDefault();
else evt.returnValue = false;
// когда мы отпускаем кнопку мыши, убираем «проверочный флаг»
