javascript问题mootools drag.cart下面的代码有什么问题

时间:2012-01-04 16:13:09

标签: javascript html mootools

<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>

1 个答案:

答案 0 :(得分:0)

对于初学者来说,你加载mootools两次 - 不同的版本 - 然后在mootools-more之后加载它们,这取决于首先加载的mootools-core。

这看起来像mootools drag and drop demo ...