JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/cerebris/ember-rest/blob/master/src/ember-rest.js"></script>
<script type="text/x-handlebars" data-template-name="blocki" >
    {{view.blocki.menuTitle}}
    {{#each view.blocki.children}}
        {{view App.Block blockiBinding="this"}}
    {{/each}}
</script>

<script type="text/x-handlebars">
    {{view App.Block blockiBinding="App.data" }}
</script>

CSS

.blocks-container {
  width: 30em;
  height: 30em;
  border:2px solid #566789;
  box-shadow: 2px 2px 19px #aaa;
  -o-box-shadow: 2px 2px 19px #aaa;
  -webkit-box-shadow: 2px 2px 19px #aaa;
  -moz-box-shadow: 2px 2px 19px #aaa;
  -moz-border-radius:0.5em;
  border-radius:0.5em;
  opacity:0.7;
  filter:alpha(opacity=80);
  margin: 0.5em;
}

.block { 
    display: block;
    float: left;
    border:1px solid #779989;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    opacity:0.8;
    filter:alpha(opacity=80);
    line-height:5em;
    text-align:center;
    z-index:20; 
    background-color:#FFC000;
    color:black;
    font-family:helvetica;
    padding:0.5em;
    margin: 0.5em;
    font-size:0.9em;
}

.selected {
    background-color:#DD1010;
}

JavaScript

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.Block = Em.View.extend(DragNDrop.Draggable, DragNDrop.Droppable, {
    tagName: 'div',
    classNames: ['block'],
    templateName: 'blocki',
    classBindings: ['selected'],
    selected: false,
    click: function(evt) {
        this.selected = !this.selected
    },
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        var dragTitle = this.blocki.menuTitle;
        dataTransfer.setData('dragTitle', dragTitle);
        console.log("dragging " + dragTitle);
        this._super(event);
        this.preventDefaults();
        return false;
    },
    drop: function(event) {
        var dragBlock = event.originalEvent.dataTransfer.getData('dragTitle');

        alert(dragBlock + " was dropped on " + this.get('context').menuTitle);
        
        return this._super(event);
    }        
});

App.data = {
    menuTitle: 'main page',
    children: [{
        menuTitle: 'Block 1',
        children: [{
            menuTitle: 'Block 1.1'
        },
        {
            menuTitle: 'Block 1.2'
        }]
    }, {
            menuTitle: 'Block 2',
        children: [{
            menuTitle: 'Block 2.1',
            children: [{
                menuTitle: 'Block 2.1.1',
                    children: [{
                       menuTitle: 'Block 2.1.1.1'
                    }]
               }]
       ...