drag and drop

**olo4all** · 29-08-2011, 22:17

ciao,

in allegato trovate una pagina html che realizza un menu contestuale per aggiugnere dei "box" alla pagina (sulla pagina iniziale ce n'e' gia' uno) e dovrebbe permettere il drag and drop

il fatto e' che la cosa funziona perfettamente se il mouse si sposta a dx e/o in basso ma non funziona a sx e verso l'alto e questo nonostante le coordinate siano rilevate correttamente (in alto a sx ci sono 2 campi che le riportano in tempo reale

Pagina e scripts sono stati creati e testati con firefox e con explorer ho idea che non funzionino; pero' con FF (escluso il problema di cui sopra) funzionano.

Qualcuno ha qualche idea su quale potrebbe essere la causa del problema??

**br1** · 29-08-2011, 22:23

Originariamente inviato da olo4all
in allegato

**olo4all** · 01-09-2011, 08:16

ok; anche se non capisco come il regolamento di un sito di open-minded possa essere tanto restrittivo da rendere un titolo un problema; quello che volevo capire e' se il fatto che nessuno ha risposto e' legato al tuo intervento o ad un disinteresse generale; avrei davvero bisogno di capire perché una cosa che a logica dovrebbe funzionare sempre funziona solo nel 50% dei casi ma non so davvero dove sbattere la testa

**Friko85** · 01-09-2011, 08:47

Non ti sei accorto di non aver allegato nulla..

**olo4all** · 02-09-2011, 09:52

giuro che ero convinto di averlo fatto; per evitare di nuovo il problema incollo qui il codice:

<html>

<head>
<style>
.band {
background: red;
position:absolute;
margin: 1em;
top:50px;
padding: 1em;
border-radius: 1.5em;
box-shadow: black 1em 1em 0.5em
}
</style>
</head>

<body>

<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X

<input type="text" name="MouseY" value="0" size="4"> Y

</form>

<div ondblclick="set_drag(event)" onmouseout="unset_drag()" onmousemove="drag(event)" style="z-index:-1; position:absolute; id="init" class="band" oncontextmenu="showMenu(event)">

This is the starting box id is 0</p>
</div>

<script>
<!--
// Determino tipo browser
var IE = document.all?true:false

// IImposto cattura evento per NS
if (!IE) document.captureEvents(Event.MOUSEMOVE);

//Imposto funzione mouse move per il documento
document.onmousemove=drag;

// variabili per le coordinate del mouse
var tempX = 0;
var tempY = 0;

//attiva drag dell'oggetto (usato con dblclick dal div init)
function set_drag(e){
if (!e) var e = window.event;
oggetto=e.target;
oggetto.style.zIndex=10;
ready_to_drag=true;
//clickedPointX=e.clientX;
//clickedPointY=e.clientY;
return false;
}

//effettua drag
function drag(e){
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}else{
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0};
if (tempY < 0){tempY = 0};
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
if (ready_to_drag){
oggetto=e.target;
oggetto.style.left=tempX;
oggetto.style.top=tempY;
}
return false;
}

//disattiva drag
function unset_drag(e){
if (!e) var e = window.event;
oggetto=e.target;
document.onmousemove = null;
ready_to_drag=false;
return false;
}

</script>

</body>
</html>

**olo4all** · 02-09-2011, 15:13

Anche se non ho capito bene perche' funziona (la if aggiunta nella funzione drag(e) e' piuttosto "strana"), ho risolto la cosa modificando in questo modo le 3 funzioni di drag e impostandole direttamente tra gli eventi del div

//funzioni per il trascinamento dell'oggetto
function set_drag(e){
if (!e) var e = window.event;
oggetto=e.target||e.srcElement;
//if (!oggetto) var oggetto=e.srcElement;
oggetto.style.zIndex=10;
document.onmousemove=drag;
ready_to_drag=true;
doubleclickXPoint=e.clientX;
doubleclickYPoint=e.clientY;
}

function drag(e){
if (!e) var e = window.event;
currentXPosition=e.clientX;
currentYPosition=e.clientY;

if (doubleclickXPoint > currentXPosition){
newXCoord = doubleclickXPoint-currentXPosition;
}else{
newXCoord = currentXPosition-doubleclickXPoint;
}
if (doubleclickYPoint > currentYPosition){
newYCoord = doubleclickYPoint-currentYPosition;
}else{
newYCoord = currentYPosition-doubleclickYPoint;
}

if (ready_to_drag){
oggetto=e.target||e.srcElement;
oggetto.style.left=newXCoord;
oggetto.style.top=newYCoord;
}
}

function unset_drag(e){
if (!e) var e = window.event;
oggetto=e.target||e.srcElement;
document.onmousemove = null;
ready_to_drag=false;
}

Discussione: drag and drop

Strumenti discussione

Ricerca discussione

Visualizza

drag and drop

Re: drag and drop

ok

Permessi di invio