С течением времени важность js становится все более ощутимой. Js позволяет не только создавать веб-страницы (например, платформу Ext), но и создавать некоторые веб-спецэффекты. Эти специальные эффекты не только совместимы с ПК, но и совместимы. с мобильными телефонами В конце концов, они основаны на браузере, не имеющем ничего общего с платформой. Теперь системные приложения Microsoft для Windows 8 можно разрабатывать с использованием js. Если у вас есть время, вы можете попробовать.
Теперь давайте перейдем к делу и поговорим о том, как реализовать перетаскиваемый Div в js. Чтобы реализовать эту функцию, давайте сначала поговорим об идее:
1. Захватить событие mousedown элемента управления мышью.
2. Захват события перемещения мыши в документе.
3. Отменить мероприятие
Тогда давайте посмотрим на код:
Скопируйте код кода следующим образом:
функция Drag(id) {
var $ = функция (флаг) {
вернуть document.getElementById(флаг);
}
$(id).onmousedown = функция (e) {
вар д = документ;
вар страница = {
событие: функция (evt) {
вар ев = евт || window.event;
вернуть ев;
},
pageX: функция (evt) {
вар е = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY: функция (evt) {
вар е = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
LayerX: функция (evt) {
вар е = this.event(evt);
вернуть e.layerX || e.offsetX;
},
LayerY: функция (evt) {
вар е = this.event(evt);
вернуть e.layerY || e.offsetY;
}
}
вар x = page.layerX(e);
вар y = page.layerY(e);
если (dv.setCapture) {
dv.setCapture();
}
иначе, если (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = функция (e) {
вар tx = page.pageX(e) - x;
вар ty = page.pageY(e) - y;
dv.style.left = tx + «px»;
dv.style.top = ty + "px";
}
d.onmouseup = функция () {
если (dv.releaseCapture) {
dv.releaseCapture();
}
иначе, если (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = ноль;
d.onmouseup = ноль;
}
}
}
Анализ кода:
1.
Получить объект div
Скопируйте код кода следующим образом:
var $ = функция (флаг) {
вернуть document.getElementById(флаг);
}
2. Зафиксируйте событие mousedown документа:
В нем есть такой кусок кода:
Скопируйте код кода следующим образом:
вар страница = {
событие: функция (evt) {
вар ев = евт || window.event;
вернуть ев;
},
pageX: функция (evt) {
вар е = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY: функция (evt) {
вар е = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
LayerX: функция (evt) {
вар е = this.event(evt);
вернуть e.layerX || e.offsetX;
},
LayerY: функция (evt) {
вар е = this.event(evt);
вернуть e.layerY || e.offsetY;
}
}
Среди них event получает событие мыши, pageX и pageY получают координаты мыши, LayerX и LayerY получают расстояние между мышью и границей div.
Еще есть кусок кода:
Скопируйте код кода следующим образом:
если (dv.setCapture) {
dv.setCapture();
}
иначе, если (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
Это необходимо для захвата событий MouseMove и MouseUp элемента div. Если вы не знаете tx, вы можете проверить его в Интернете.
3. События документа MouseMove и mouseUp:
Скопируйте код кода следующим образом:
d.onmousemove = функция (e) {
вар tx = page.pageX(e) - x;
вар ty = page.pageY(e) - y;
dv.style.left = tx + «px»;
dv.style.top = ty + "px";
}
d.onmouseup = функция () {
если (dv.releaseCapture) {
dv.releaseCapture();
}
иначе, если (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = ноль;
d.onmouseup = ноль;
}
Среди них наиболее важными кодами являются tx и ty, которые используются для установки координат div.
Некоторые люди могут спросить, почему -x,-y?
x, y фактически получают расстояние между мышью и границей div, если оно не вычитается
Координаты стрелки мыши такие же, как координаты x и y элемента div. После перетаскивания позиция мыши переместится в верхний левый угол.
Скопируйте код кода следующим образом:
если (dv.releaseCapture) {
dv.releaseCapture();
}
иначе, если (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = ноль;
d.onmouseup = ноль;
Приведенный выше код предназначен для отмены событий onmousemove и onmouseup документа после отпускания мыши.
Недавно я изучал js и поделюсь с вами своим новым опытом в будущем. Надеюсь учиться и добиваться прогресса вместе со всеми.