2012-01-04 43 views
-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> 
+0

請格式化你的代碼 – pleasedontbelong 2012-01-04 16:23:05

+0

這是不是問問題的方式......你嘗試過這麼遠嗎? – 2012-01-04 16:33:59

+1

這段代碼應該做什麼?它最終會做什麼?你遇到了什麼問題? – 2012-01-04 16:34:52

回答

0

首先,你加載mootools的兩倍 - 不同的版本 - 你加載它們的mootools-更多,這取決於MooTools的核心首先被加載之後。

這看起來像mootools drag and drop demo ...