Cursor MOVE con DIV in javascript

[z.cristiano]

Salve a tutti, sto sviluppando un'applicazione che consente di spostare il box DIV con il mouse e dentro il div ho messo lo STYLE -> CURSOR: MOVE e POSITION: ABSOLUTE e il resto ho creato il codice ma non ha funzionato, cosa ho sbagliato?

<script>

var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)


var tempX = 0
var tempY = 0

function getMouseXY(e)
{

if (IE)
{

tempX = event.clientX;
tempY = event.clientY;

} else {

tempX = e.pageX
tempY = e.pageY

}

if (tempX < 0)
{

tempX = 0;

}

if (tempY < 0)
{

tempY = 0;

}

document.getElementById('prova').style.left = tempX
document.getElementById('prova').style.top = tempY

return true

}

</script>

<div id="prova" style="cursor:move; position:relative;" onClick="getMouseXY();" onMouseMove="getMouseXY();">dnvodnndsvoind svijdfji</div>

[RoTeam]

Usare il draggable di jquery UI era troppo faticoso?

http://jqueryui.com/demos/draggable/

[z.cristiano]

Hai ragione...
Perdonami tanto...

Però per dire è per imparare, ovvero mi piacerebbe proprio programmare tutto io, secondo te il codice che vedi sopra cosa c'è di sbagliato? Perchè ho visto alcuni siti che non usano JQUERY

[cavicchiandrea]

credo (mai approfondito) che document.captureEvents(Event.MOUSEMOVE) sia proprietario IE
studiati questo http://www.dynamicdrive.com/dynamicindex4/image3.htm (che dovrebbe essere cross-browser)

[z.cristiano]

Grazie mille, ho studiato un po modificando qualcosa e ha funzionato...

Unica cosa che non ci riesco è che in questa pagina
http://www.graficalesta.it/1.html

Ci sono due DIV per cui, come si fa a vedere che ogni DIV ha le sue dimensioni?

Cioè, in questa pagina se lo sposti PROVA BOX 1, sul testo MISURE fa vedere le misure pixel tra LEFT e TOP e poi, clicco PROVA BOX 2, lo sposto e su MISURE cambia per PROVA BOX 2 ripartendo da 0

Quello che vorrei fare è:
Se clicco PROVA BOX 1, lo sposto e lo fermo in un posto fa vedere e rimane le sue misure visibili all'interno di PROVA BOX 1 e infine, clicco PROVA BOX 2, lo sposto e lo fermo in un posto fa vedere e rimane le sue misure visibili all'interno di PROVA BOX 2

Come si fa?
Ecco il codice


<style type="text/css">

.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}

th, td {text-align: left; padding-right: 1em;}

table {margin: 0 0 0.4em 1.3em; border: 1px solid rgb(240, 240, 240);}

</style>

<div class="drag">Prova BOX 1 - <span id="sx"></span> / <span id="dx"></span></div>

<div class="drag">Prova BOX 2 - <span id="sx"></span> / <span id="dx"></span></div>

<pre id="debug"> </pre>







<script language="JavaScript" type="text/javascript">

<!--

function $(id)
{

return document.getElementById(id);

}

var _startX = 0; // mouse starting positions

var _startY = 0;

var _offsetX = 0; // current element offset

var _offsetY = 0;

var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove

var _oldZIndex = 0; // we temporarily increase the z-index during drag

var _debug = $('debug'); // makes life easier


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;

_debug.innerHTML = target.className == 'drag'

? 'draggable element clicked'

: 'NON-draggable element clicked';

if ((e.button == 1 && window.event != null || e.button == 0) && target.className == '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;

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

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

document.getElementById('sx').innerHTML = _dragElement.style.left;

document.getElementById('dx').innerHTML = _dragElement.style.top;

_debug.innerHTML = 'MISURE = ' + _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;

_debug.innerHTML = 'MISURE = ';

}

}

//-->

</script>



</body>



</html>

[cavicchiandrea]

<span id="sx/dx"></span> sono doppi (in realtà gli ID dovono essere univoci)

[z.cristiano]

?????
Non ho capito?

E' solo questo che devo mettere univoco per far in modo che ogni DIV ha le sue dimensioni?

[cavicchiandrea]

Originariamente inviato da z.cristiano
?????
Non ho capito?

E' solo questo che devo mettere univoco per far in modo che ogni DIV ha le sue dimensioni?

Penso di si, ma non è detto che poi vada come vuoi tu, mettiamola cosi gli ID devono essere univoci a prescindere dal funzionamento dello script.

[z.cristiano]

Fatto, non ha cambiato niente, è uguale

[cavicchiandrea]

Ho apportato alcune modifiche e adesso "dovrebbe" fare quello che vuoi http://webprogetti.it/testdrag.html