Hola!!!!
Bueno, ante todo daros las gracias por responder. Creo que ya conseguí lo que os comentaba ayer, aunque estoy casi segura que dentro de poco volvereis a tener noticias mias, jeje!!!!
Cuelgo el código por si alguien lo quiere. Ahhhh!!!!si veis cosas extrañas (YAHOO.util....) es porque estoy trabajando con YUI Library (de Yahoo).
Un saludo!!!!
<html>
<head>
<title>Selección y adición de elementos a una lista</title>
<p align="center"><b>Selección y adición de elementos a una lista</b></p>
<style type="text/css">
body {
margin:10px;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<style>
div.Workarea { border:1px solid #7EA6B2; width:700px; height:800px; margin:10px;}
div.Listas{padding:10px; float:left; border:1px solid #7EA6B2;margin:10px;}
<!-- Formulario-->
ul.Dragform {
position: relative;
list-style: none;
margin:10px;
}
ul.draglp {
position: relative;
width: 200px;
height:240px;
border: 1px solid gray;
background: #f7f7f7;
list-style: none;
margin:0;
padding:0;
}
ul.draglp li {
margin: 1px;
cursor: move;
zoom: 1;
}
ul.draglp_alt {
position: relative;
list-style: none;
margin:0;
padding:0;
padding-bottom:10px;
}
uldraglp_alt li {
margin: 1px;
cursor: move;
}
li.Lista1 {
width: 50px;
height: 20px;
background-color: #D1E6EC;
border:1px solid #7EA6B2;
}
#user_actions { float: right; }
form.select{
background-color:#D1E6EC;
margin:0;
padding:0;
}
</style>
</head>
<body style="font-family: Verdana">
<div class="Workarea">
<ul id="ul" class="Dragform">
<!-- Creación del formulario-->
<div class="db">
<form method="POST" action="assets/post.php">
<label for="nombre">Nombre:</label><input type="textbox" name="nombre" />
<label for="ejecucion">Ejecución:</label>
<select name="ejecucion[]">
<option value="Secuencial">Secuencial</option>
<option value="Paralela">Paralela</option>
</select>
<label for="retardo">Retardo:</label><input type="textbox" name="retardo" />
<div class="clear"></div>
</form>
</div>
</ul>
<div class="Listas">
<form name="selectform">
<select multiple name="form">
<option value="Copiar ficheros">Copiar ficheros</option>
<option value='Borrar ficheros'>Borrar ficheros</option>
<option value='Ejecutar programa'>Ejecutar programa</option>
<option value='Ejecutar Ant'>Ejecutar Ant</option>
<option value='Ejecutar SQL'>Ejecutar SQL</option>
<option value='Mostrar mensaje'>Mostrar mensaje</option>
</select>
<input type=button value="Añadir a la lista" onClick="passText(this.form.form.options[this.form.form.selectedIndex].value);">
</form>
</div>
<div class="Listas">
<ul id="ul1" class="draglp">
<li class="Lista1" id="li1_1">Dibujos</li>
</ul>
</div>
</div>
<script type="text/javascript">
i=1, j=4;
oldvalue = "";
function passText(passedvalue) {
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;
if (passedvalue != "") {
var totalvalue = passedvalue+"
"+oldvalue;
var li = document.createElement('li');
li.innerHTML = totalvalue;
li.id="id"+i+"_"+j;
var ul = document.getElementById('ul1');
ul.appendChild(li);
// oldvalue=li.innerHTML;
Dom.setStyle(li.id, "width", "50px");
Dom.setStyle(li.id, "height", "30px");
Dom.setStyle(li.id, "backgroundColor", "#D1E6EC");
Dom.setStyle(li.id, "border", "1px solid #7EA6B2");
new YAHOO.util.DDTarget("ul1");
new YAHOO.example.DDList(li.id);
j++;
}
}
//Funciones para el Drag&Drop
(function() {
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;
//////////////////////////////////////////////////////////////////////////////
// example app
//////////////////////////////////////////////////////////////////////////////
YAHOO.example.DDApp = {
init: function() {
var rows=3,cols=1,i,j;
for (i=1;i<cols+1;i=i+1) {
new YAHOO.util.DDTarget("ul"+i);
}
for (i=1;i<cols+1;i=i+1) {
for (j=2;j<rows+1;j=j+1) {
new YAHOO.example.DDList("li" + i + "_" + j);
}
}
Event.on("switchButton", "click", this.switchStyles);
},
switchStyles: function() {
Dom.get("ul1").className = "draglist_alt";
}
};
//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////
YAHOO.example.DDList = function(id, sGroup, config) {
YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
this.logger = this.logger || YAHOO;
var el = this.getDragEl();
Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
this.goingUp = false;
this.lastY = 0;
};
YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
startDrag: function(x, y) {
this.logger.log(this.id + " startDrag");
// make the proxy look like the source element
var dragEl = this.getDragEl();
var clickEl = this.getEl();
Dom.setStyle(clickEl, "visibility", "hidden");
dragEl.innerHTML = clickEl.innerHTML;
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
Dom.setStyle(dragEl, "border", "2px solid gray");
},
endDrag: function(e) {
var srcEl = this.getEl();
var proxy = this.getDragEl();
// Show the proxy element and animate it to the src element's location
Dom.setStyle(proxy, "visibility", "");
var a = new YAHOO.util.Motion(
proxy, {
points: {
to: Dom.getXY(srcEl)
}
},
0.2,
YAHOO.util.Easing.easyOut
)
var proxyid = proxy.id;
var thisid = this.id;
// Hide the proxy and show the source element when finished with the animation
a.onComplete.subscribe(function() {
Dom.setStyle(proxyid, "visibility", "hidden");
Dom.setStyle(thisid, "visibility", "");
});
a.animate();
},
onDragDrop: function(e, id) {
// If there is one drop interaction, the li was dropped either on the list,
// or it was dropped on the current location of the source element.
if (DDM.interactionInfo.drop.length === 1) {
// The position of the cursor at the time of the drop (YAHOO.util.Point)
var pt = DDM.interactionInfo.point;
// The region occupied by the source element at the time of the drop
var region = DDM.interactionInfo.sourceRegion;
// Check to see if we are over the source element's location. We will
// append to the bottom of the list once we are sure it was a drop in
// the negative space (the area of the list without any list items)
if (!region.intersect(pt)) {
var destEl = Dom.get(id);
var destDD = DDM.getDDById(id);
destEl.appendChild(this.getEl());
destDD.isEmpty = false;
DDM.refreshCache();
}
}
},
onDrag: function(e) {
// Keep track of the direction of the drag for use during onDragOver
var y = Event.getPageY(e);
if (y < this.lastY) {
this.goingUp = true;
} else if (y > this.lastY) {
this.goingUp = false;
}
this.lastY = y;
},
onDragOver: function(e, id) {
var srcEl = this.getEl();
var destEl = Dom.get(id);
// We are only concerned with list items, we ignore the dragover
// notifications for the list.
if (destEl.nodeName.toLowerCase() == "li") {
var orig_p = srcEl.parentNode;
var p = destEl.parentNode;
if (this.goingUp) {
p.insertBefore(srcEl, destEl); // insert above
} else {
p.insertBefore(srcEl, destEl.nextSibling); // insert below
}
DDM.refreshCache();
}
}
});
Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
})();
</script>
</body>
</html>
