Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - drag and drop elementi web
Forum - Javascript - drag and drop elementi web

Avatar
albertogil (Normal User)
Newbie


Messaggi: 11
Iscritto: 29/12/2010

Segnala al moderatore
Postato alle 13:15
Martedì, 17/05/2011
ciao a tutti
ho la necessità che l'utente del mio sito possa trascinare gli elementi
come finestre di elenco menu.. è possibile con javascript?
ho inserito questo codice ma non so applicare agli elementi le funzioni...qualcuno mi aiuti please....:D
Codice sorgente - presumibilmente Delphi

  1. var DragHandler = {
  2.  
  3.  
  4.         // private property.
  5.         _oElem : null,
  6.  
  7.  
  8.         // public method. Attach drag handler to an element.
  9.         attach : function(oElem) {
  10.                 oElem.onmousedown = DragHandler._dragBegin;
  11.  
  12.                 // callbacks
  13.                 oElem.dragBegin = new Function();
  14.                 oElem.drag = new Function();
  15.                 oElem.dragEnd = new Function();
  16.  
  17.                 return oElem;
  18.         },
  19.  
  20.  
  21.         // private method. Begin drag process.
  22.         _dragBegin : function(e) {
  23.                 var oElem = DragHandler._oElem = this;
  24.  
  25.                 if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
  26.                 if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
  27.  
  28.                 var x = parseInt(oElem.style.left);
  29.                 var y = parseInt(oElem.style.top);
  30.  
  31.                 e = e ? e : window.event;
  32.                 oElem.mouseX = e.clientX;
  33.                 oElem.mouseY = e.clientY;
  34.  
  35.                 oElem.dragBegin(oElem, x, y);
  36.  
  37.                 document.onmousemove = DragHandler._drag;
  38.                 document.onmouseup = DragHandler._dragEnd;
  39.                 return false;
  40.         },
  41.  
  42.  
  43.         // private method. Drag (move) element.
  44.         _drag : function(e) {
  45.                 var oElem = DragHandler._oElem;
  46.  
  47.                 var x = parseInt(oElem.style.left);
  48.                 var y = parseInt(oElem.style.top);
  49.  
  50.                 e = e ? e : window.event;
  51.                 oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
  52.                 oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
  53.  
  54.                 oElem.mouseX = e.clientX;
  55.                 oElem.mouseY = e.clientY;
  56.  
  57.                 oElem.drag(oElem, x, y);
  58.  
  59.                 return false;
  60.         },
  61.  
  62.  
  63.         // private method. Stop drag process.
  64.         _dragEnd : function() {
  65.                 var oElem = DragHandler._oElem;
  66.  
  67.                 var x = parseInt(oElem.style.left);
  68.                 var y = parseInt(oElem.style.top);
  69.  
  70.                 oElem.dragEnd(oElem, x, y);
  71.  
  72.                 document.onmousemove = null;
  73.                 document.onmouseup = null;
  74.                 DragHandler._oElem = null;
  75.         }
  76.  
  77. }


Ultima modifica effettuata da albertogil il 17/05/2011 alle 14:19


rino gaetano
PM
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Up
1
Down
V
Segnala al moderatore
Postato alle 14:46
Martedì, 17/05/2011
ma usare un framework javascript come jquery insieme a jquery ui che funziona di sicuro no eh?


http://www.mte90.net/
Kde, Debian e Programmazione web/Desktop!


Linux Counter.li #482442
PM
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Up
0
Down
V
Segnala al moderatore
Postato alle 21:28
Mercoledì, 18/05/2011
Si può usare anche l'HTML5; ecco un esempio http://html5demos.com/drag (puoi vedere il sorgente cliccando il link "view source" in basso nella pagina)

Ultima modifica effettuata da GN il 18/05/2011 alle 21:29


-
PM
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Up
0
Down
V
Segnala al moderatore
Postato alle 16:52
Giovedì, 19/05/2011
il problema dell'html5 è che non funziona su tutti i browser Ie in primis quindi al momento per certe cose è da aspettare.


http://www.mte90.net/
Kde, Debian e Programmazione web/Desktop!


Linux Counter.li #482442
PM