<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>
答案 0 :(得分:0)
对于初学者来说,你加载mootools两次 - 不同的版本 - 然后在mootools-more之后加载它们,这取决于首先加载的mootools-core。
这看起来像mootools drag and drop demo ...