कोड पर एक नज़र डालें एक समाधान के लिए नीचे (कुछ अतिरिक्त के साथ)। कार्ट आइटमों को सॉर्ट करना शामिल है (जेएस के अंत में cartController देखें)।
और यहां एक कामकाजी पहेली: http://jsfiddle.net/ud3323/5uX9H/।
अद्यतन: एक ड्रैग छवि उदाहरण जोड़ा गया।
Handlebars
<script type="text/x-handlebars" >
<b>Available Products</b>
<br /><br />
{{#each App.productsController}}
{{#view App.ProductView contentBinding="this"}}
{{content.name}}
{{/view}}<br />
{{/each}}
<hr />
{{#view App.ProductDropTarget
dragContextBinding="App.productsController.currentDragItem"}}
Shopping Cart
<div style="height: 20px">{{helpText}}</div>
{{/view}}
<br />
{{#each App.cartController}}
{{#view App.ProductView contentBinding="this"}}
{{content.name}}
{{/view}}<br />
{{/each}}
</script>
जावास्क्रिप्ट:
App = Ember.Application.create({});
DragNDrop = Ember.Namespace.create();
DragNDrop.cancel = function(event) {
event.preventDefault();
return false;
};
DragNDrop.Draggable = Ember.Mixin.create({
attributeBindings: 'draggable',
draggable: 'true',
dragStart: function(event) {
var dataTransfer = event.originalEvent.dataTransfer;
dataTransfer.setData('Text', this.get('elementId'));
}
});
DragNDrop.Droppable = Ember.Mixin.create({
dragEnter: DragNDrop.cancel,
dragOver: DragNDrop.cancel,
drop: function(event) {
event.preventDefault();
return false;
}
});
App.Product = Ember.Object.extend({
name: null,
isAdded: null
});
App.ProductView = Ember.View.extend(DragNDrop.Draggable, {
tagName: 'span',
// .setDragImage (in #dragStart) requires an HTML element as the first argument
// so you must tell Ember to create the view and it's element and then get the
// HTML representation of that element.
dragIconElement: Ember.View.create({
attributeBindings: ['src'],
tagName: 'img',
src: 'http://twitter.com/api/users/profile_image/twitter'
}).createElement().get('element'),
dragStart: function(event) {
this._super(event);
// Let the controller know this view is dragging
this.setPath('content.isDragging', true);
// Set the drag image and location relative to the mouse/touch event
var dataTransfer = event.originalEvent.dataTransfer;
dataTransfer.setDragImage(this.get('dragIconElement'), 24, 24);
},
dragEnd: function(event) {
// Let the controller know this view is done dragging
this.setPath('content.isDragging', false);
}
});
App.ProductDropTarget = Ember.View.extend(DragNDrop.Droppable, {
tagName: 'div',
classNames: ['dropTarget'],
classNameBindings: ['cartAction'],
helpText: null,
// This will determine which class (if any) you should add to
// the view when you are in the process of dragging an item.
cartAction: Ember.computed(function(key, value) {
if(Ember.empty(this.get('dragContext'))) {
this.set('helpText','(Drop Zone)');
return null;
}
if(!this.getPath('dragContext.isAdded')) {
this.set('helpText', '(Drop to Add)');
return 'cart-add';
} else if(this.getPath('dragContext.isAdded')) {
this.set('helpText', '(Drop to Remove)');
return 'cart-remove';
} else {
this.set('helpText', '(Drop Zone)');
return null;
}
}).property('dragContext').cacheable(),
drop: function(event) {
var viewId = event.originalEvent.dataTransfer.getData('Text'),
view = Ember.View.views[viewId];
// Set view properties
// Must be within `Ember.run.next` to always work
Ember.run.next(this, function() {
view.setPath('content.isAdded', !view.getPath('content.isAdded'));
});
return this._super(event);
}
});
App.productsController = Ember.ArrayController.create({
content: [
App.Product.create({ name: "MacBook Pro", isAdded: false }),
App.Product.create({ name: "iPhone", isAdded: false }),
App.Product.create({ name: "iPad", isAdded: true }),
App.Product.create({ name: "iTV", isAdded: false })
],
currentDragItem: Ember.computed(function(key, value) {
return this.findProperty('isDragging', true);
}).property('@each.isDragging').cacheable(),
productsInCart: Ember.computed(function(key, value) {
return this.filterProperty('isAdded', true);
}).property('@each.isAdded').cacheable()
});
App.cartController = Ember.ArrayController.create({
content: Ember.computed(function(key, value) {
var cartItems = this.get('cartItems');
if(!Ember.empty(cartItems)) {
// Sort desc by name
return cartItems.sort(function(a,b){
if((a.get('name').toLowerCase()) < (b.get('name').toLowerCase()))
return -1;
else return 1;
});
}
}).property('cartItems').cacheable(),
cartItemsBinding: 'App.productsController.productsInCart'
});
धन्यवाद इतना आदमी, यह कमाल है! आप सवाल का जवाब देने के ऊपर और परे गए थे। आपकी मदद के लिए बहुत बहुत धन्यवाद! मैं इसे उत्पाद फ़ोटो के क्लोन खींचने के साथ कार्यान्वित करने जा रहा हूं - क्या इस डेमो में क्लोन ड्रैगिंग को लागू करने का कोई आसान तरीका है? एक बार फिर, बहुत बहुत धन्यवाद आदमी, आप बहुत गधे लात मारो। –
मैंने दिखाया है कि ड्रैग आइकन का उपयोग कैसे करें। –
आप महोदय, एक सज्जन और विद्वान हैं –