I used the examples of this question to create drag-and-drop-script I could use on a web application.
After re-designing it for my own purposes, there are some features I'd like to have implemented. I've been trying for myself a while, but I haven't found the soulution yet...
associated jsfiddle: http://jsfiddle.net/BLLTH/
Features:
already added objects should be removed from the available list
removing an added object by clicking on an "x"-symbol, which puts it back to the available list
objects must be in the same order as they were added
any ideas? =)
templates:
<script type="text/x-handlebars" >
<b>Available Objects</b><br /><br />
{{#each App.objectsController}}
{{#view App.ObjectView contentBinding="this"}}
{{view.content.name}}<br />
{{/view}}
{{/each}}
<br /><br /><br /><br />
{{#view App.ObjectDropTarget dragContextBinding="App.objectsController.currentDragItem"}}
{{#each App.cartController}}
{{#view App.ObjectView contentBinding="this" class="single"}}
{{view.content.name}}
{{/view}}
{{/each}}
{{/view}}
javascript:
App = Em.Application.create({});
DragNDrop = Em.Namespace.create();
DragNDrop.cancel = function(event) {
event.preventDefault();
return false;
};
DragNDrop.Draggable = Em.Mixin.create({
attributeBindings: 'draggable',
draggable: 'true',
dragStart: function(event) {
var dataTransfer = event.originalEvent.dataTransfer;
dataTransfer.setData('Text', this.get('elementId'));
}
});
DragNDrop.Droppable = Em.Mixin.create({
dragEnter: DragNDrop.cancel,
dragOver: DragNDrop.cancel,
drop: function(event) {
event.preventDefault();
return false;
}
});
App.Object = Em.Object.extend({
name: null,
isAdded: null
});
App.ObjectView = Em.View.extend(DragNDrop.Draggable, {
tagName: 'div',
// .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.
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
},
dragEnd: function(event) {
// Let the controller know this view is done dragging
this.setPath('content.isDragging', false);
}
});
App.ObjectDropTarget = Em.View.extend(DragNDrop.Droppable, {
tagName: 'div',
classNames: ['dropTarget'],
classNameBindings: ['cartAction'],
// This will determine which class (if any) you should add to
// the view when you are in the process of dragging an item.
drop: function(event) {
var viewId = event.originalEvent.dataTransfer.getData('Text'),
view = Em.View.views[viewId];
// Set view properties
// Must be within `Ember.run.next` to always work
Em.run.next(this, function() {
view.setPath('content.isAdded', !view.getPath('content.isAdded'));
});
return this._super(event);
}
});
App.objectsController = Em.ArrayController.create({
content: [
App.Object.create({
name: "Object 1",
isAdded: false
}),
App.Object.create({
name: "Object 2",
isAdded: false
}),
App.Object.create({
name: "Object 3",
isAdded: false
}),
App.Object.create({
name: "Object 4",
isAdded: false
})
],
currentDragItem: Em.computed(function(key, value) {
return this.findProperty('isDragging', true);
}).property('@each.isDragging').cacheable(),
objectsInCart: Em.computed(function(key, value) {
return this.filterProperty('isAdded', true);
}).property('@each.isAdded').cacheable()
});
App.cartController = Em.ArrayController.create({
content: Em.computed(function(key, value) {
var cartItems = this.get('cartItems');
if (!Em.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.objectsController.objectsInCart'
});
