Во время фронтального развития есть много мест, где используются эффекты перетаскивания. Конечно, http://jqueryui.com/draggable/ - хороший выбор, но я человек, который ломает запеканку и спрашивает правду. Мне потребовалось некоторое время, чтобы внедрить подобные плагины с JS, поэтому я не буду много говорить.
Сначала: HTML и CSS
Кода -копия выглядит следующим образом:
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style>
* {
поля: 0;
Заполнение: 0;
}
#div1 {
позиция: абсолютно;
Ширина: 100px;
высота: 100px;
курсор: двигаться;
фоновый цвет: красный;
}
</style>
</head>
<тело>
<div id = "div1">
</div>
</body>
</html>
Теперь сначала реализуйте основной алгоритм:
Кода -копия выглядит следующим образом:
<Скрипт>
window.onload = function () {
// Получите див, который нужно перетащить
var div1 = document.getElementbyId ("div1");
// Добавить событие прессы мыши
div1.onmousedown = function (evt) {
var oevent = evt || событие;
// Получить расстояние от нажатия мыши до девта с левой стороны
var distancex = oevent.clientx - div1.offsetleft;
var distance = oevent.clientx - div1.offsettop;
// Добавить время скольжения DOC
document.onmousemove = function (evt) {
var oevent = evt || событие;
// пересчитывать левое верхнее значение Div
var left = oevent.clientx - distancex;
var top = oevent.clienty - Distance;
// оставленный, когда меньше или равна нулю, установите на ноль, чтобы не дать DIV не вытащить из документа
if (слева <= 0) {
слева = 0;
}
// Когда влево превышает правую границу документа, установлена на правую границу
else if (left> = document.documentelement.clientwidth - div1.offsetwidth) {
left = document.documentelement.clientwidth - div1.offsetwidth;
}
if (top <= 0) {
Верх = 0;
}
иначе if (top> = document.documentelement.clientheight - div1.offsetheight) {
top = document.documentelement.clientHeight - div1.offsetheight;
}
// назначьте Div снова
div1.style.top = top + "px";
div1.style.left = Left + "px";
}
// Добавить событие лифта мыши
div1.onmouseup = function () {
// Очистить событие
document.onmouseMove = null;
div1.onmouseup = null;
}
}
}
</script>
Да, используйте объектно-ориентированную реализацию
Кода -копия выглядит следующим образом:
<style>
* {
поля: 0;
Заполнение: 0;
}
#div1 {
Ширина: 100px;
высота: 100px;
фоновый цвет: красный;
}
#div2 {
фоновый цвет: желтый;
Ширина: 100px;
высота: 100px;
}
</style>
<div id = "div1"> </div>
<div id = "div2"> </div>
JS Draggle Class:
Кода -копия выглядит следующим образом:
функция перетаскивания (id) {
this.div = document.getElementbyId (id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "Absolute";
}
this.disx = 0;
this.disy = 0;
var _this = это;
this.div.onmousedown = function (evt) {
_This.getDistance (EVT);
document.onmousemove = function (evt) {
_This.SetPosition (EVT);
}
_this.div.onmouseup = function () {
_This.clearevent ();
}
}
}
Drag.prototype.getDistance = function (evt) {
var oevent = evt || событие;
this.disx = oevent.clientx - this.div.offsetleft;
this.disy = oevent.clienty - this.div.offsettop;
}
Drag.prototype.setposition = function (evt) {
var oevent = evt || событие;
var l = oevent.clientx - this.disx;
var t = oevent.clienty - this.disy;
if (l <= 0) {
l = 0;
}
else if (l> = document.documentelement.clientwidth - this.div.offsetwidth) {
l = document.documentelement.clientwidth - this.div.offsetwidth;
}
if (t <= 0) {
t = 0;
}
else if (t> = document.documentelement.clientheight - this.div.offsetheight) {
t = document.documentelement.clientHeight - this.Div.Offsetheight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
Drag.prototype.clearevent = function () {
this.div.onmouseup = null;
document.onmouseMove = null;
}
Наконец: окончательная реализация:
Кода -копия выглядит следующим образом:
window.onload = function () {
новое сопротивление ("div1");
новое сопротивление ("div2");
}
Эффекты следующие:
Выше всего об этой статье. Я надеюсь, что для всех будет полезны более опытно освоить JavaScript.