(function($){ var Product = new Class({ Binds: ['displayImage'], initialize: function(product) { this.product_id=product.product_id; this.category_id=product.category_id; this.title=product.title; this.description=product.description; this.image=product.image; this.price=product.price; this.amount=product.amount; this.added = 0; }, show: function() { var e = new Element('div',{ 'id': 'product-'+this.product_id, 'class': 'item', 'title': this.title, 'html': '<img rel="product-'+this.product_id+'" />', 'styles': { 'opacity': 0 } }); e.getElements('img')[0].addEvent('load',this.displayImage).src=this.image; e.addEvent('mousedown',this.handleMouseDown); e.store('object',this); e.inject($('products')); }, displayImage: function(e) { var fx=new Fx.Tween($(e.target.get('rel')),{property:'opacity'}).addEvent('complete',this.displayDescription.bind(this,e)).start(1); }, displayDescription: function(e) { var parent=e.target.getParent('div') parent.set('html','<div class="item_title">'+this.title+'</div><div class="item_description">'+this.description+'</div><div class="item_price">'+this.price+'</div><div class="item_amount">'+this.amount+'</div>'+parent.get('html')); }, handleMouseDown: function(e) { e.stop(); var clone=this.getElement('img').clone().setStyles(this.getCoordinates()).addClass('draggable').inject(document.body); clone.store('object',this.retrieve('object')); var drag = new Drag.Move(clone,{ droppables: $('cart'), onDrop:
В конечном итоге, у вас должен был получиться скрипт со следующим содержанием:
Итак, наш мини интернет магазин с "Drag & Drop" корзиной полностью готов.
Комментариев нет:
Отправить комментарий