Помогите понять в чем проблема, я только начал, еще зеленый. Проблема вот в чем, элемент перемещается нормально, но вот неадекватно resize'зиться. | Код |
HTML:
Javascript:
var OffsetX, OffsetY;
/*crossbrowser offSet!!!!!!!!!!!!!*/
function corOffset(e)
{
var isOpera, isIE, isNav, isFox, isOther = true;
if (navigator.userAgent.indexOf("Opera")!=-1)
{
isOpera = true;
} else if (navigator.userAgent.indexOf("Firefox")!=-1)
{
isFox = true;
} else if (navigator.appName == "Microsoft Internet Explorer")
{
isIE = true;
} else
{
isOther = true;
}
if (isIE)
{
OffsetX = e.offsetX;
OffsetY = e.offsetY;
}
else
{
OffsetX = e.pageX - document.getElementById("divImage").offsetLeft; //OffsetX = e.layerX ; OffsetY = e.layerY;
OffsetY = e.pageY - document.getElementById("divImage").offsetTop;
document.getElementById("idX").value = OffsetX + 'px';
document.getElementById("idY").value = OffsetY + 'px';
}
}
/*
var elementToDrag = null;
var offX, offY; // глобальные переменные для хранения смещения
function captureElement (elem, e)
{ // "захват" элемента мышью
if (!elementToDrag) {
elementToDrag = elem;
offX = OffsetX; // запоминаем координаты курсора
offY = OffsetY; // в момент щелчка
}
}
function releaseElement ()
{ // "отпускание" элемента
if(elementToDrag != null)
{
elementToDrag = null;
}
else
{
}
}
function dragElement (e) { // "перетаскивание" элемента
if (elementToDrag)
{
elementToDrag.style.left = e.clientX - offX ; // вносим поправку
elementToDrag.style.top = e.clientY - offY ; // в координаты элемента
}
}
document.onmouseup = releaseElement;
var theobject = null; //This gets a value as soon as a resize start
*/
////////////////////////resize//////////////////////
function resizeObject()
{
this.el = null; //pointer to the object
this.dir = ""; //type of current resize (n, s, e, w, ne, nw, se, sw)
this.grabx = null; //Some useful values
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}
//Find out what kind of resize! Return a string inlcluding the directions
function getDirection(el)
{
var xPos, yPos, offset, dir;
dir = "";
xPos = OffsetX;
yPos = OffsetY;
offset = 10; //The distance from the edge in pixels
if (yPos<offset) dir += "n"; //если Y меньше 10 -это север
else if (yPos > el.offsetHeight-offset) dir += "s"; //если Y больше восота-зона -это юг
if (xPos<offset) dir += "w"; //если X меньше нуля -это запад
else if (xPos > el.offsetWidth-offset) dir += "e"; //если X больше ширина-зона -это восток
return dir;
}
function doDown(e)
{
var e = e ? e : window.event;
var event_element = e.target ? e.target : e.srcElement;
var el = getReal(event_element, "className", "resizeMe");
if (el == null)
{
theobject = null;
return;
}
dir = getDirection(el);
if (dir == "") return;
theobject = new resizeObject();
theobject.el = el;
theobject.dir = dir;
theobject.grabx = e.clientX;
theobject.graby = e.clientY;
theobject.width = el.offsetWidth;
theobject.height = el.offsetHeight;
theobject.left = el.offsetLeft;
theobject.top = el.offsetTop;
e.returnValue = false;
e.cancelBubble = true;
}
function doUp()
{
if (theobject != null)
{
theobject = null;
}
}
function doMove(e)
{
var e = e ? e : window.event; //кроссбраузерное решение
var event_element = e.target ? e.target : e.srcElement;
var el, xPos, yPos, str, xMin, yMin;
xMin = 20; //The smallest width possible
yMin = 20; // height
el = getReal(event_element, "className", "resizeMe");
if (el.className == "resizeMe")
{
str = getDirection(el);
//Fix the cursor
if (str == "")
{
str = "default";
}
else
{
str += "-resize";
}
el.style.cursor = str;
}
//Dragging starts here
if(theobject != null)
{
if (dir.indexOf("e") != -1)
{
theobject.el.style.width = Math.max(xMin, theobject.width + e.clientX - theobject.grabx) + "px";
}
if (dir.indexOf("s") != -1)
{
theobject.el.style.height = Math.max(yMin, theobject.height + e.clientY - theobject.graby) + "px";
}
if (dir.indexOf("w") != -1)
{
theobject.el.style.left = Math.min(theobject.left + e.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px";
theobject.el.style.width = Math.max(xMin, theobject.width - e.clientX + theobject.grabx) + "px";
}
if (dir.indexOf("n") != -1)
{
theobject.el.style.top = Math.min(theobject.top + e.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px";
theobject.el.style.height = Math.max(yMin, theobject.height - e.clientY + theobject.graby) + "px";
}
e.returnValue = false;
e.cancelBubble = true;
}
}
function getReal(el, type, value)
{
var temp = el;
while ((temp != null) && (temp.tagName != "BODY"))
{
if (eval("temp." + type) == value)
{
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousemove = doMove;
<style type="text/css">
#divImage
{
position:absolute;
background:#ece0fb;
width:60px;
left:50px;
height:60px;
}
</style>
</head>
<body onmousemove = "corOffset(event), dragElement(event)">
<div id="divImage" class="resizeMe" onmousedown="captureElement(this)" onmouseup="releaseElement()"></div>
</body>
|
ах да, нужно решение на чистом JavaScript. или если совсем лом смотреть на бой ### код, преложите пожалуйста что то путевое, заране спасибо! Это сообщение отредактировал(а) wawandas - 3.8.2012, 17:47 |
Drag&Drop and resize, помогите решить проблему 
Загрузка ...
