Hola Intento hacer un drag and drop como [URL="http://demos111.mootools.net/Drag.Cart"]este [/URL]pero con varios droppables (indeterminados), que al insertar la primera imagen funciona correctamente, pero la segunda ya empeza a hacer cosas raras. Cambia de objeto seleccionado inserta varias.. he estado buscando bastante información pero tampoco me he aclarado muxo si alguien me diera una pauta a seguir se lo agradeceria.
Gracias de antemano
Código:
<SCRIPT type="text/javascript">
function eventos (){
var drop = $('cart');
var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
$$('.item').each(function(item){
item.addEvent('mousedown', function(e) {
e = new Event(e).stop();
var clone = this.clone()
.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.addEvent('emptydrop', function() {
this.remove();
drop.removeEvents();
}).inject(document.body);
$$('.cart2').each(function(drop){
var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
item.inject(drop);
}
});
});
$$('.cart2').each(function(cart){
var drag = clone.makeDraggable({
droppables: [cart]
}); // this returns the dragged element
drag.start(e); // start the event manual
});
});
});
}
window.addEvent('domready', function(){
eventos();
});
</SCRIPT>
</HEAD><BODY>
<DIV id="demo">
<DIV id="items">
<DIV class="item" style="background-image:url(http://demos111.mootools.net/demos/Drag.Cart/s1.jpg)">
<SPAN>Shirt 1</SPAN>
</DIV>
<DIV class="item" style="background-image:url(http://demos111.mootools.net/demos/Drag.Cart/s2.jpg)">
<SPAN>Shirt 2</SPAN>
</DIV>
<DIV class="item" style="background-image:url(http://demos111.mootools.net/demos/Drag.Cart/s3.jpg)">
<SPAN>Shirt 3</SPAN>
</DIV>
<DIV class="item" style="background-image:url(http://demos111.mootools.net/demos/Drag.Cart/s4.jpg)">
<SPAN>Shirt 4</SPAN>
</DIV>
<DIV class="item" style="background-image:url(http://demos111.mootools.net/demos/Drag.Cart/s5.jpg)">
<SPAN>Shirt 5</SPAN>
</DIV>
<DIV class="item" style="background-image:url(http://demos111.mootools.net/demos/Drag.Cart/s6.jpg)">
<SPAN>Shirt 6</SPAN>
</DIV>
</DIV>
<DIV id="cart">
<table background="campoFutbol.jpg" height="410" width="300">
<tr>
<td class="cart2" id="1" style="border:1px solid red; width:20px" width="20" ></td>
<td class="cart2" id="2" style="border:1px solid red; width:20px" width="20" ></td>
<td class="cart2" id="3" style="border:1px solid red; width:20px" width="20" ></td>
<td class="cart2" id="4" style="border:1px solid red; width:20px" width="20" ></td>
<td class="cart2" id="5" style="border:1px solid red; width:20px" width="20" ></td>
<td class="cart2" id="6" style="border:1px solid red; width:20px" width="20" ></td>
</tr></table>
</DIV>
<br /><br />
<DIV id="cart2" class="cart2" style="border:1px solid red; height:300px; width:200px; background-color:#FFFFFF">
</DIV>