drag-and-drop html5

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    dragStart(event) {
      event.dataTransfer.setData("Text", event.target.id);
      document.getElementById("demo").innerHTML = "Started to drag the p element";
    },
    allowDrop(event) {
      event.preventDefault();
    },
    drop(event) {
      event.preventDefault();
      var data = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(data));
      document.getElementById("demo").innerHTML = "The p element was dropped";
    }
  }
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.droptarget {
  cursor:grab;
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component}}
<br>
<br>

templates.components.my-component.hbs

<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget" ondrop={{action "drop"}} ondragover={{action "allowDrop"}}>
  <p ondragstart={{action "dragStart"}} draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondrop={{action "drop"}} ondragover={{action "allowDrop"}}></div>

<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}