MooTools
Demos
Chaining
Native
Periodical
Slick
Slick.Finder
Drag and Drop
Drag.Cart
Drag.Drop
Drag.Move
Drag.Scroll
Effects
Effects
Fx.Morph
Fx.Slide
Fx.Sort
Transitions
Events
Element.Event
MouseEnter
MouseWheel
Element.Delegation
Element.Event.Pseudos
Request
Request
Request.HTML
Request.JSON
Plugins
Accordion
Slider
Sortables
Enhanced Forms
Drag.Cart
Ghost dragging for Shopping Carts.
#items { float: left; border: 1px solid #F9F9F9; width: 525px; } .item { background-color: #FFF; background-position: left top; background-repeat: no-repeat; border: 1px solid #EEE; border-bottom: 2px solid #DDD; border-right: 2px solid #DDD; cursor: move; float: left; height: 175px; margin: 10px; position: relative; width: 150px; } .item span { bottom: 0; font-size: 8px; font-weight: bold; left: 0; position: absolute; text-align: center; width: 100%; } #cart { background-color: #FFF; border: 1px solid #F9F9F9; float: right; padding-bottom: 50px; width: 195px; } #cart .info { color: #444; font-size: 9px; font-weight: bold; text-align: center; } #cart .item { background-position: 50% -22px; border-width: 1px; cursor: default; height: 85px; margin: 5px; width: 85px; }
<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"> <div class="info">Drag Items Here</div> </div>
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); }); });
Demo
Edit with jsFiddle
Docs
CSS
HTML
JavaScript
Shirt 1
Shirt 2
Shirt 3
Shirt 4
Shirt 5
Shirt 6
Drag Items Here
Documentation References:
Drag.Move
Drag
Element:addEvent
Event:stop
Element:getCoordinates
Fx.Tween element methods: Element:highlight and Elementtween
#items { float: left; border: 1px solid #F9F9F9; width: 525px; } .item { background-color: #FFF; background-position: left top; background-repeat: no-repeat; border: 1px solid #EEE; border-bottom: 2px solid #DDD; border-right: 2px solid #DDD; cursor: move; float: left; height: 175px; margin: 10px; position: relative; width: 150px; } .item span { bottom: 0; font-size: 8px; font-weight: bold; left: 0; position: absolute; text-align: center; width: 100%; } #cart { background-color: #FFF; border: 1px solid #F9F9F9; float: right; padding-bottom: 50px; width: 195px; } #cart .info { color: #444; font-size: 9px; font-weight: bold; text-align: center; } #cart .item { background-position: 50% -22px; border-width: 1px; cursor: default; height: 85px; margin: 5px; width: 85px; }
<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"> <div class="info">Drag Items Here</div> </div>
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); }); });