Я создаю движок JavaScript перетаскивания. Я узнал, как установить ограничивающую рамку в качестве родительский элемент. Однако теперь я хочу установить ограничивающий прямоугольник для любого родительского элемента любого родительского элемента или для всей страницы (без границ).
Сейчас мой механизм Javascript выглядит так:
// JavaScript Document
var dragObj;
document.addEventListener("mousedown", down, false);
function down(event) {
if(~event.target.className.search(/drag/)) {
dragObj = makeObj(event.target);
dragObj.element.style.zIndex="100";
document.addEventListener("mousemove", freeMovement, false);
}
}
function freeMovement(event) {
if (typeof(dragObj.element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
dragObj.element.style.left = Math.max(0, Math.min(event.clientX - dragObj.posX, dragObj.boundX)) + "px";
dragObj.element.style.top = Math.max(0, Math.min(event.clientY - dragObj.posY, dragObj.boundY)) + "px";
}
function drop() {
dragObj.element.style.zIndex="1";
document.removeEventListener("mousemove", freeMovement, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
function makeBoundlessObj(e) {
var obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
return obj;
}
function makeObj(e) {
obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
var curleft = curtop = 0;
if (e.offsetParent) {
do {
curleft += e.offsetLeft;
curtop += e.offsetTop;
//alert(e.id + ":" + e.innerHTML);
if(~e.className.search(/bound/)) {
obj.boundX = curleft - obj.element.offsetLeft;
obj.boundY = curtop - obj.element.offsetTop;
return obj;
}
} while (e = e.offsetParent);
}
return obj;
}
function findPos(obj) { // Donated by `lwburk` on StackOverflow
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}
Мой CSS выглядит следующим образом :
@charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
position: relative;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
#center {
width: 500px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color:#ccc;
text-align: center;
border-radius: 25px;
-moz-border-radius: 25px;
}
#box {
background-color: #FF3;
height: 278px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
opacity: 0.5;
}
И мой HTML довольно чистый:
<div id="center">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square"> One </p>
<p class="drag square"> Two </p>
</div>
</div>
Я несколько раз пытался создать правильные функции. Я приведу один из созданных мной, который не работает, и перечислю, почему:
Если у него нет границ, Я установил границы по умолчанию в качестве родительского элемента (потому что я не знаю, как установить границы для всей страницы)
Если один из родительских элементов IS является границей, то я не устанавливаю привязанные координаты правильно (опять же, я не знаю как)
О, и я установил границы при создании drag_object.
Функция создания JavaScript:
function makeObj(e) {
var obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
var curleft = curtop = 0;
if (e.offsetParent) {
do {
curleft += e.offsetLeft;
curtop += e.offsetTop;
//alert(e.id + ":" + e.innerHTML);
if(~e.className.search(/bound/)) {
obj.boundX = curleft - obj.element.offsetLeft;
obj.boundY = curtop - obj.element.offsetTop;
return obj;
}
} while (e = e.offsetParent);
}
return obj;
}
Какая правильная математика для установки ограничивающей рамки и Почему? Могу ли я избавиться от position: relative
в классе .bound
? Могу ли я сделать класс .drag
, а не position: absolute
? Я знаю, что все это, вероятно, сильно повлияет на то, как написана ограничивающая функция. Если бы мне пришлось выбирать между наличием класса .drag
или . Класс bound
не требует определенного типа позиции
, я бы выбрал, чтобы класс .bound
был настроен на любое позиционирование.
Спасибо всем за чтение и помогает! Это очень много значит для меня; Я учусь на дневном отделении (пансион) с очень небольшим количеством свободного времени = /
РЕДАКТИРОВАТЬ:
Я должен отметить, что у меня десятый день изучения Javascript - или пятнадцатый, в зависимости от того, как вы посмотрите на него, и я хотел бы выучить язык, прежде чем я начну использовать такие библиотеки, как jQuery. Этот двигатель - академическое упражнение. я сделал для себя ради знания и изучения языка =]