Il seguente codice funziona piuttosto bene!
(potete provarlo solo dopo aver scaricato scriptaculous da qui: http://script.aculo.us/downloads )
Però vorrei sapere come tenere in primo piano gli elementi "LI" durante la fase di trascinamento.
Il problema è che avendo impostato nel CSS:
gli elementi "LI" rimangono intrappolati in "container". Quindi devo trovare il modo di tirarli fuori da li durante il trascinamento...inoltre durante la fase di trascinamento mi piacerebbe che la barra di scorrimento non cambiasse il proprio valore/lunghezzacodice:#container { height: 200px; width: 500px; border: 1px solid red; overflow-y: auto; overflow-x: hidden; }
SAPRESTE AIUTARMI? GRAZIE!
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>TEST DRAG DROP</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #container { height: 200px; width: 500px; border: 1px solid red; overflow-y: auto; overflow-x: hidden; } li { background-color: red; display: inline; padding: 30px; margin: 5px; float:left; } #dropHere { height: 100px; width: 100px; margin-top: 7px; border: 3px solid blue; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.3/src/scriptaculous.js"></script> <script type="text/javascript"> var isDrag = false; function init() { Droppables.add("dropHere", { accept: "draggable", onDrop: function() { alert("OK!!!"); } }); var ul = new Element("ul"); $("container").insert(ul); for(var i = 0; i <= 12; i++) { var li = new Element("li"); var id = "id"+i; li.id = id; li.innerHTML = i; li.className = "draggable"; li.observe('mouseup', click_senza_drag.bindAsEventListener(this)); ul.insert(li); new Draggable(id, { onStart: function(){ isDrag = true; }, revert: true }); } } function click_senza_drag() { if(!isDrag) alert("hai cliccato senza trascinare!!!"); else isDrag = false; } document.observe('dom:loaded', function(){ init(); }); </script> </head> <body> <div id="container"></div> <div id="dropHere">drop here!</div> </body> </html>
Rispondi quotando