Drag div only on box

[z.cristiano]

Hello..
I have create this code

function $(id)
{

return document.getElementById(id);

}

var _startX = 0;

var _startY = 0;

var _offsetX = 0;

var _offsetY = 0;

var _dragElement;

var _oldZIndex = 0;

var _debug = $('debug');

InitDragDrop();


function InitDragDrop()
{

document.onmousedown = OnMouseDown;

document.onmouseup = OnMouseUp;

}

function OnMouseDown(e)
{

if(e == null)

e = window.event;

var target = e.target != null ? e.target : e.srcElement;

if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'testo_immagine_drag')
{

_startX = e.clientX;

_startY = e.clientY;

_offsetX = ExtractNumber(target.style.left);

_offsetY = ExtractNumber(target.style.top);

_oldZIndex = target.style.zIndex;

target.style.zIndex = 10000;

_dragElement = target;

document.onmousemove = OnMouseMove;

document.body.focus();

document.onselectstart = function () { return false; };

target.ondragstart = function() { return false; };

return false;

}

}



function ExtractNumber(value)
{

var n = parseInt(value);

return n == null || isNaN(n) ? 0 : n;

}



function OnMouseMove(e)
{

if(e == null)

var e = window.event;

var target = e.target != null ? e.target: e.srcElement;

var elem = target.getAttribute("id");

_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';

_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

if(document.getElementById("misure"+ elem))
{

document.getElementById("misure"+ elem).value = _dragElement.style.left +"||"+ _dragElement.style.top;

}


}



function OnMouseUp(e)
{

if(_dragElement != null)
{

_dragElement.style.zIndex = _oldZIndex;

document.onmousemove = null;

document.onselectstart = null;

_dragElement.ondragstart = null;

_dragElement = null;


}

}

How is the code that the div can drag only on the box? Nor on area of browser
THe name class of div is "testo_immagine_drag"

[justinbarneskin]

Its the line here-
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'testo_immagine_drag')

Everything else is excluded

[z.cristiano]

Ah, help me..
How is the specific code? What I write?

[justinbarneskin]

Ah, help me..
How is the specific code? What I write?

Try this simple, then you can take it anywhere

if ((e.button == 1 && window.event != null || e.button == 0) && target.className != 'testo_immagine_drag')

[Mekatek]

Hi, I don't know if you code is for a webpage or a webapp, anyway if you are not familiar with jquery you can have a look at it, it is pretty straight forward.

You need to use Jquery and Jquery UI and then calling an interaction called draggable it is very simple to achieve what you want.

You can have a look at Jquery UI.