Ember.js Drag'n'Drop Example

uses Ember.js v0.9.8 but translates seemlessly to Ember.js v1.0.x

by Nick Iaconis

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.js"></script>
<script type="text/x-handlebars" >
    Drag and drop the orange and blue box onto the gray one ...
    
    {{view App.Box class="box orange"}}
    {{view App.Box class="box blue"}}
    
    {{view App.DropTarget class="box gray"}}
    
    This is a test ...
</script>

CSS

.orange {
    background-color: orange;
}

.blue {
    background-color: darkblue;
}

.box.gray {
    background-color: gray;
    height: 0;
    position: relative;
}

.gray:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 50px;
    background-color: rgba(30,30,30,0.8);
}

.box {
    width: 50px;
    height: 50px;
    margin: 20px;
}

JavaScript

App = Ember.Application.create({});

DragNDrop = Ember.Namespace.create();

DragNDrop.cancel = function(event) {
    event.preventDefault();
    return false;
};

DragNDrop.Dragable = 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) {
        var viewId = event.originalEvent.dataTransfer.getData('Text');
        Ember.View.views[viewId].destroy();        
        event.preventDefault();
        return false;
    }
});

App.Box = Ember.View.extend(DragNDrop.Dragable);
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);