Другие языки программирования и технологии

JS-программеры! подскажите пожалуйста код для перемещения объекта курсором мыши.

JavaScript. есть у нас объект, скажем, obj01, который должен быть перемещаем мышкой. то есть следовать за курсором, если курсор находится в области этого объекта и левая кнопка мыши зажата, как перетаскивают значи на рабочем столе)
Han Berdiyew
Han Berdiyew
419
основное - это привязка обработчиков событий на перемещение мышки, нажатие и отпускание левой кнопки. но из-за мелких нюансов, типа добавления "position: absolute" в стиль и простейшей арифметики с координатами, строк кода получается многовато.

с сохранением форматирования здесь: http://pastie.org/689100
без сохранения ниже, но только кусок на javascript'е, т. к. div'ы обрезаются при вставке.

var dragObject;
var offsetX, offsetY;
var isDragging = false;

window.onload = init;

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

function init() {
var o = document.getElementById("obj01");
o.ondrag = function() { return false; };
o.onselectstart = function() { return false; };
o.style.left = "100px";
o.style.top = "100px";
o.style.display = "block";
}

function mouseDown(o, e) {
dragObject = o;
if(window.event) e = window.event;
var oX = parseInt(dragObject.style.left);
var oY = parseInt(dragObject.style.top);
var mouseX = e.clientX;
var mouseY = e.clientY;
offsetX = mouseX - oX;
offsetY = mouseY - oY;
isDragging = true;
return false;
}

function mouseMove(e) {
if(!isDragging) return;
if(window.event) e = window.event;
var mouseX = e.clientX;
var mouseY = e.clientY;
var newX = mouseX - offsetX;
var newY = mouseY - offsetY;
dragObject.style.left = newX + "px";
dragObject.style.top = newY + "px";
return false;
}

function mouseUp() {
if(!isDragging) return;
isDragging = false;
return false;
}
ПА
Павел Акимов
756
Лучший ответ
Muradjon ...... Чувак, не подскажешь, как сохранять их местоположение (чтоб при перезагрузке страницы он оставался в том месте, куда его поставили)
Идёшь на jQueryUI.com и строишь Custom Download через Theme Framework (вторая ссылка) , потом на странице выбора элементовубедись, что стоит галочка draggable. Грузишь всё это, распаковываешь. Идёшь на тот же сайт. Нажимаешь первую ссылку. Потом в столбике interactions выбираешь draggable и читаешь документацию. Тебе понравится.
Юрий Лосев
Юрий Лосев
233

Похожие вопросы