Drag on BOX

[z.cristiano]

Salve a tutti..
Sono riuscito a fare il DRAG DIV dentro il box, però non riesco a mettere fino a dove può trascinare, in senso che, così come ho sviluppato gli permette di trascinare in tutta la pagina del broser, invece vorrei che gli permette di trascinare fino al box con misure 400 X 400 px oltre no.

Come si fa?

[cavicchiandrea]

Se usi jquery-ui qui dovrebbe esserci indicazioni (vedi div arancio piccolo racchiuso in quello più grande).
Se usi javascript puro la vedo molto più complessa e difficile, comunque posta il codice e una pagina demo.

[z.cristiano]

Ciao, eccomi...

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;


}

}

[cavicchiandrea]

Manca la pagina demo pubblica, che aiuta a fare test e un quadro della situazione.
Ma mi permetto d'insistere usa jquery-ui quando non sia ha una buona (in questo caso ottima) conoscenza del javascript questo tipo di operazioni risultano più complesse e difficili.

[z.cristiano]

Ecco il codice html..

<style>


.box_prodotto {
float:center;
position:absolute;
width:400px;
height:400px;
text-align:center;
border: 1px solid #CCCCCC;
}

.testo_immagine_drag {
position:absolute;
padding:10px;
cursor:move;
}

</style>

<div id="box_prodotto" class="box_prodotto" style="z-index:-2;">

<div id="24"><div class="testo_immagine_drag" name="24" id="_24" style="z-index:1; border: dashed 1px #CCCCCC; font-size:12pt;">Testo 24</div>

</div>

Per JQUERY, guarda da quello che ho fatto funziona benissimo, mi manca solo e unicamente la funzione di spostare il drag DIV solo all'interno del box.

Quindi, meglio di no usare JQUERY altrimenti dovrei fare da capo tutto quello che sto facendo..

Grazie, ti sono molto in debito
:-D

[cavicchiandrea]

Ok, attendi qualcuno più preparato nello specifico

[z.cristiano]

Grazie mille, spero che non ti appesantisce di questa cosa..
TI giuro che sarà ultima volta..

[cavicchiandrea]

Originariamente inviato da z.cristiano
Grazie mille, spero che non ti appesantisce di questa cosa..
TI giuro che sarà ultima volta..

Questa non l'ho capita, comunque non sono proprio adatto, l'unica volta che ho dovuto usare il drag-drop l'ho fatto con jquery-ui, forse solo per darti uno spunto per limitare lo spostamento devi rilevare lo spazio (credo con offset) del div contenitore