-3
<script type="text/javascript" src="/storage/scripts/mootools-more-1.4.0.1.js"> </script>
<script type="text/javascript" src="/storage/scripts/mootools-core-1.4.2-full-compat.js"> </script>
<script type="text/javascript" src="/storage/scripts/mootools-core-1.4.2.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function() {
$$('.item').addEvent('mousedown', function(event) {
event.stop(); // `this` refers to the element with the .item class
var shirt = this;
var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('cart'),
onDrop: function(dragging, cart) {
dragging.destroy();
if (cart != null) {
shirt.clone().inject(cart);
cart.highlight('#7389AE', '#FFF');
}
},
onEnter: function(dragging, cart) {
cart.tween('background-color', '#98B5C1');
},
onLeave: function(dragging, cart) {
cart.tween('background-color', '#FFF');
},
onCancel: function(dragging) {
dragging.destroy();
}
});
drag.start(event);
});
});
</script>
<div id="cart">
<div class="info">Drag Items Here</div>
</div>
<div id="items">
<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>
請格式化你的代碼 – pleasedontbelong 2012-01-04 16:23:05
這是不是問問題的方式......你嘗試過這麼遠嗎? – 2012-01-04 16:33:59
這段代碼應該做什麼?它最終會做什麼?你遇到了什麼問題? – 2012-01-04 16:34:52