Drag div con class

Erzsébeth

Nuovo Utente
25 Lug 2012
14
0
1
32
Torino
Salve a tutti,
sono una nabba in js ed è tutto il giorno che cerco di capire come modificare uno script.

Devo far si che 3 div posizionati in verticale si possano spostare separatamente.
Al momento ho il codice funzionante con un solo div con id collegato al js.
Per convertire l'azione a 3 div con class e non id, come si deve fare?

Spero si sia compreso il mio cruccio, non so davvero dove mettere le mani.
Nel caso sia un errore banale o una cosa incomprensibile, non mandatemi a rogo, sono solo una ragazza che non sa dire di no al proprio capo :oops:

Vi metto il codice qui sotto:

Codice:
<body>
    <div id="drag">Spostami!</div>
</body>
<script>
var Draggable = function (id) {
  var el = document.getElementById(id),
    isDragReady = false,
    dragoffset = {
      x: 0,
      y: 0
    };
  this.init = function () {
    this.initPosition();
    this.events();
  };
  this.initPosition = function () {
    el.style.position = "absolute";
    el.style.top = "20px";
    el.style.left = "48%";
  };
  this.events = function () {
    var self = this;
    _on(el, 'mousedown', function (e) {
      isDragReady = true;
      //corssbrowser mouse pointer values
      e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
        document.documentElement.scrollLeft :
        document.body.scrollLeft);
      e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
        document.documentElement.scrollTop :
        document.body.scrollTop);
      dragoffset.x = e.pageX - el.offsetLeft;
      dragoffset.y = e.pageY - el.offsetTop;
    });
    _on(document, 'mouseup', function () {
      isDragReady = false;
    });
    _on(document, 'mousemove', function (e) {
      if (isDragReady) {
        e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
          document.documentElement.scrollLeft :
          document.body.scrollLeft);
        e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
          document.documentElement.scrollTop :
          document.body.scrollTop);
        el.style.top = (e.pageY - dragoffset.y) + "px";
        el.style.left = (e.pageX - dragoffset.x) + "px";
      }
    });
  };
  //cross browser event Helper function
  var _on = function (el, event, fn) {
    document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
  };
  this.init();
}
</script>
<script type="text/javascript">
    new Draggable('drag');
</script>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, fai prima a dare id diversi ai div e poi istanzi piu classi
Codice:
new Draggable('drag');
new Draggable('drag2');
new Draggable('drag3');
altrimenti devi usare il metodo getElementByClassName("class"), e modificare le funzioni aggiungendo dei cicli.
 

Erzsébeth

Nuovo Utente
25 Lug 2012
14
0
1
32
Torino
Ciao, fai prima a dare id diversi ai div e poi istanzi piu classi
Codice:
new Draggable('drag');
new Draggable('drag2');
new Draggable('drag3');
altrimenti devi usare il metodo getElementByClassName("class"), e modificare le funzioni aggiungendo dei cicli.

Ho provato a creare diversi id e semi-funziona, nel senso che si spostano come voglio se non che*scappano* quando clicco, ovvero sembrano traslare verticalmente :/
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
a me non "scappano", però vengono sovrapposti, per dargli posizioni diverse puoi creare un array
Codice:
var pos = new Array();
  pos["drag"] = "20px";
  pos["drag2"] = "60px";
  pos["drag3"] = "100px";
e quando setti la posizione la prendi dall'array
Codice:
el.style.top = pos[id];
posta il link se lo hai online
 

Erzsébeth

Nuovo Utente
25 Lug 2012
14
0
1
32
Torino
a me non "scappano", però vengono sovrapposti, per dargli posizioni diverse puoi creare un array
Codice:
var pos = new Array();
  pos["drag"] = "20px";
  pos["drag2"] = "60px";
  pos["drag3"] = "100px";
e quando setti la posizione la prendi dall'array
Codice:
el.style.top = pos[id];
posta il link se lo hai online

Niente link, sto "giocando" con i codici per creare un applicativo dimostrativo in locale.
E sinceramente non ho idea di cosa tu mi abbia consigliato di fare :/

I miei div hanno un margine dato da un altro fattore e quindi non si spostano.
Ma quando vado per spostarli, il 1st funziona alla grande, il 2nd e il 3rd vengono traslati verso il basso del 50% della verticale e non capisco il motivo.
Come faccio a mostrare qui l'intero codice attuale?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Carica uno zip, il forum è stato aggiornato proprio oggi ma penso che ti basta cliccare su Carica Documenti
Io l'ho provato con il codice che mi hai postato e funziona
HTML:
<body>
  <div id="drag">Spostami!</div>
  <div id="drag2">Spostami2!</div>
  <div id="drag3">Spostami2!</div>
</body>
<script>
  var Draggable = function (id) {
  var pos = new Array();
  pos["drag"] = "20px";
  pos["drag2"] = "60px";
  pos["drag3"] = "100px";
  var el = document.getElementById(id),
  isDragReady = false,
  dragoffset = {
  x: 0,
  y: 0
  };
  this.init = function () {
  this.initPosition();
  this.events();
  };
  this.initPosition = function () {
  el.style.position = "absolute";
  el.style.top = pos[id];
  el.style.left = "48%";
  };
  this.events = function () {
  var self = this;
  _on(el, 'mousedown', function (e) {
  isDragReady = true;
  //corssbrowser mouse pointer values
  e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
  document.documentElement.scrollLeft :
  document.body.scrollLeft);
  e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
  document.documentElement.scrollTop :
  document.body.scrollTop);
  dragoffset.x = e.pageX - el.offsetLeft;
  dragoffset.y = e.pageY - el.offsetTop;
  });
  _on(document, 'mouseup', function () {
  isDragReady = false;
  });
  _on(document, 'mousemove', function (e) {
  if (isDragReady) {
  e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
  document.documentElement.scrollLeft :
  document.body.scrollLeft);
  e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
  document.documentElement.scrollTop :
  document.body.scrollTop);
  el.style.top = (e.pageY - dragoffset.y) + "px";
  el.style.left = (e.pageX - dragoffset.x) + "px";
  }
  });
  };
  //cross browser event Helper function
  var _on = function (el, event, fn) {
  document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
  };
  this.init();
  }
</script>
<script type="text/javascript">
  new Draggable('drag');
  new Draggable('drag2');
  new Draggable('drag3');
</script>
 

Erzsébeth

Nuovo Utente
25 Lug 2012
14
0
1
32
Torino
Carica uno zip,...
Probabilmente ci sono dei conflitti con altri comandi.
Non mi fa caricare lo zip, scrivo il codice direttamente:

Codice:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element70px</title>
    <link rel="stylesheet" type="text/css" href="draggable.css">
    <script type="text/javascript">
function mouseDown() {
    document.getElementById("alert").style.display = "initial";
}

function mouseUp() {
    document.getElementById("alert").style.display = "none";
}


</script>
</head>
<body>

<div id="box">
    <div id="sidebar">
        <div id="drag1" class="button">Spostami!</div>
        <div id="drag2" class="button">Spostami!</div>
        <div id="drag3" class="button">Spostami!</div>
    </div>
    <div id="container">
        <div id="raw1">
        <div class="button margin" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
        <div class="button" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
    </div>
    <div id="raw2">
        <div class="button margin" onmousedown="mouseDown()" onmouseup="mouseUp()" style="opacity:0"></div>
        <div class="button" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
    </div>
    <div id="raw3">
        <div class="button margin" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
        <div class="button" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
    </div>
    </div>
    <div id="alert">Hai premuto il pulsante!</div>
</div>
</body>
<script>
var Draggable = function (id) {
  var el = document.getElementById(id),
    isDragReady = false,
    dragoffset = {
      x: 0,
      y: 0
    };
  this.init = function () {
    this.initPosition();
    this.events();
  };

  this.initPosition = function () {
    el.style.position = "relative";
    el.style.top = "0px";
    el.style.left = "0px";
  };
  //events for the element
  this.events = function () {
    var self = this;
    _on(el, 'mousedown', function (e) {
      isDragReady = true;
      //corssbrowser mouse pointer values
      e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
        document.documentElement.scrollLeft :
        document.body.scrollLeft);
      e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
        document.documentElement.scrollTop :
        document.body.scrollTop);
      dragoffset.x = e.pageX - el.offsetLeft;
      dragoffset.y = e.pageY - el.offsetTop;
    });
    _on(document, 'mouseup', function () {
      isDragReady = false;
    });
    _on(document, 'mousemove', function (e) {
      if (isDragReady) {
        e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
          document.documentElement.scrollLeft :
          document.body.scrollLeft);
        e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
          document.documentElement.scrollTop :
          document.body.scrollTop);
        el.style.top = (e.pageY - dragoffset.y) + "px";
        el.style.left = (e.pageX - dragoffset.x) + "px";
      }
    });
  };
  //cross browser event Helper function
  var _on = function (el, event, fn) {
    document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
  };
  this.init();
}</script>
<script type="text/javascript">
    new Draggable('drag1');
    new Draggable('drag2');
    new Draggable('drag3');
</script>
</html>

E qui il css:

Codice:
*{
    border: 0;
    margin: 0;
    padding: 0;
}
html,body{
    color:#FFF;
    text-align:center;
    font-size:10px;
    font-weight:bold;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#box {
    width:1024px;
    height:768px;   
    margin:0;
    overflow: hidden;
    float:left;
}

#sidebar {
    position:relative;
    width:70px;
    height:768px;
    z-index:100;
   
   
}
#drag1, #drag2, #drag3{
    position: relative;   
    border-radius:10px;
    background-color: rgba(255,0,0,0.5);
    width:70px;
    height:70px;
    margin-bottom:279px;
    float:left;   
    line-height: 70px;
    cursor:move;
    overflow: hidden;
}

#container {
    position:absolute;
    top:0;
    left:477px;
   
}

#raw1 {   
    position: relative;
    height:70px;
    margin-top:0;
}

#raw2 {   
    position: relative;
    height:70px;
    margin-top:279px;
}

#raw3 {   
    position: relative;
    height:70px;
    margin-top:279px;
}

.button {   
    position: relative;   
    border-radius:10px;
    background-color: rgba(255,0,0,0.5);
    width:70px;
    height:70px;
    float:left;   
    line-height: 70px;
    cursor:pointer;
    overflow: hidden;
}
.margin {   
    margin-right:407px;
}

.button:active {
    background-color: rgba(255,0,0,1);
    box-shadow: inset #000000 0 0 10px;
}



#alert {
    position:absolute;
    background-color: rgba(255,0,0,1);
    box-shadow: inset #000000 0 0 10px;
    border-radius: 5px;
    border:none;
    width:240px;
    height:30px;
    left:512px;
    top:384px;
    margin-top:-15px;
    margin-left:-120px;
    display:none;
    text-transform: uppercase;
    font-size: 10px;
    line-height:30px;
    z-index:200;
}
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non sono arrivato a controllare il tuo codice, potresti intanto provare ad utilizzare jquery, diventa tutto più semplice
HTML:
<!doctype html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>element70px</title>
  <link rel="stylesheet" type="text/css" href="draggable.css">
  <script type="text/javascript">
  function mouseDown() {
  document.getElementById("alert").style.display = "initial";
  }

  function mouseUp() {
  document.getElementById("alert").style.display = "none";
  }
  </script>
  </head>
  <body>

  <div id="box">
  <div id="sidebar">
  <div class="drag" id="drag1" class="button">Spostami!</div>
  <div class="drag" id="drag2" class="button">Spostami!</div>
  <div class="drag" id="drag3" class="button">Spostami!</div>
  </div>
  <div id="container">
  <div id="raw1">
  <div class="button margin" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
  <div class="button" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
  </div>
  <div id="raw2">
  <div class="button margin" onmousedown="mouseDown()" onmouseup="mouseUp()" style="opacity:0"></div>
  <div class="button" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
  </div>
  <div id="raw3">
  <div class="button margin" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
  <div class="button" onmousedown="mouseDown()" onmouseup="mouseUp()">Push</div>
  </div>
  </div>
  <div id="alert">Hai premuto il pulsante!</div>
  </div>
  </body>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script  src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  $('.drag').draggable();
  });
  </script>
</html>
 
  • Like
Reactions: Erzsébeth

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non ci sono errori nel tuo codice, bisogna solo implementare la funzione su tutti i div che ti servono ma se non ti vietano di usare jquery la soluzione è più semplice.
Nell'esempio che ti ho postato richiamo le librerie direttemente sul sito di jquery, io preferisco e consiglio anche a te di scaricartele in una tua cartella e richiamarle da li.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Z Drag div solo all'interno del box Javascript 7
Z Errore DRAG DIV Javascript 1
Z Ogni Drag DIV ha le sue dimensioni Javascript 2
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
J Jquery ui drag drop move jQuery 0
G Piccolo problema con il Drag&Drop jQuery 0
S Selezionare files con drag and drop prima di upload PHP 0
A Drag and drop per ipad , questo sconosciuto... Javascript 1
R ordinamento immagini con drag and drop e memorizzazione db PHP 1
A copiare dati in mysql con drag & drop jQuery 0
P drag e drop disabilitato con jquery Javascript 1
max1974 grid e json con drag e drop jQuery 0
M Upload con drag and drop PHP 1
zighy memorizzare gli elementi di un drag n drop Javascript 4
zighy drag drop Javascript 11
D Drag and drop immagini non compatibile con FF Javascript 1
D Drag & drop HTML5. Problema con ie e chrome! HTML e CSS 1
renegade Vendo Agenda prenotazioni sistema Drag & Drop Offerte e Richieste di Lavoro e/o Collaborazione 0
WorldWideWeb Drag&Drop su TreeView Visual Basic 0
L java,oggetti grafici e drag and drop Java 2
J Drag and drop in vb Visual Basic 1
M Drag and Resize Javascript 0
N drag & drop Flash 1
E drag & drop Flash 1
M complesso drag&drop Flash 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5

Discussioni simili