Другие языки программирования и технологии
JS-программеры! подскажите пожалуйста код для перемещения объекта курсором мыши.
JavaScript. есть у нас объект, скажем, obj01, который должен быть перемещаем мышкой. то есть следовать за курсором, если курсор находится в области этого объекта и левая кнопка мыши зажата, как перетаскивают значи на рабочем столе)
основное - это привязка обработчиков событий на перемещение мышки, нажатие и отпускание левой кнопки. но из-за мелких нюансов, типа добавления "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;
}
с сохранением форматирования здесь: 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;
}
Muradjon ......
Чувак, не подскажешь, как сохранять их местоположение (чтоб при перезагрузке страницы он оставался в том месте, куда его поставили)
Идёшь на jQueryUI.com и строишь Custom Download через Theme Framework (вторая ссылка) , потом на странице выбора элементовубедись, что стоит галочка draggable. Грузишь всё это, распаковываешь. Идёшь на тот же сайт. Нажимаешь первую ссылку. Потом в столбике interactions выбираешь draggable и читаешь документацию. Тебе понравится.
Похожие вопросы
- ПОДСКАЖИТЕ ПОЖАЛУЙСТА код разблокировки баннера билайн
- Подскажите Пожалуйста Коды Для Универсального Пульта Томсон.для Сони?
- Подкиньте идею Как определить направление от Некой точки на экране до курсора мыши
- Corel Draw. Глюки при перемещении объектов
- Подскажите пожалуйста. Может есть действительно сильные программеры. Вобщем дан 2-мерный массив.
- Как в Паскале можно описать курсор мыши? Именно вывести его на экран и определить его положение при выполнении программы
- как на ActionScript сделать растягивающийся квадрат, следующий за курсором мыши (обычно выделение мышкой, при зажатой ле
- Народ, подскажите пожалуйста, в какой программе можно сделать следущее: курсором рисовать текст (ну или цифры) который
- Вопрос про С++ !Подскажите пожалуйста (не код).
- Нужна помощь!!! подскажите пожалуйста уникальный код разлочки нокиа 1280! Срочно надо! ! заранее спасибо))