Add card with drag/drop listeners to demo app

demo/app/mobiledoc-cards/dom.js

@@ -3,6 +3,7 @@ import simpleCard from './dom/simple';
 import selfieCard from './dom/selfie';
 import imageCard from './dom/image';
 import codemirrorCard from './dom/codemirror';
+import dragoverCard from './dom/dragover';
 import createComponentCard from 'ember-mobiledoc-editor/utils/create-component-card';
 
 export default [
@@ -11,5 +12,6 @@ export default [
   selfieCard,
   imageCard,
   codemirrorCard,
-  createComponentCard('ember-card')
+  createComponentCard('ember-card'),
+  dragoverCard
 ];

demo/app/mobiledoc-cards/dom/dragover.js

@@ -0,0 +1,34 @@
+import Ember from 'ember';
+
+let { $ } = Ember;
+
+export default {
+  name: 'dragover',
+  type: 'dom',
+  render({env, payload}) {
+    let color = payload.didDrop ? 'red' : (payload.didDrag ? 'green' : 'black');
+    let text = payload.didDrop ? 'dropped' : (payload.didDrag ? 'dragged' : 'nothing');
+    let div = $(`<div>${text}</div>`).css({
+      border: `2px solid ${color}`
+    });
+
+    if (env.isInEditor) {
+      div.on('dragover', function(event) {
+        event.preventDefault();
+
+        div.css({border: '2px solid green'}).text('DRAGOVER');
+        payload.didDrag = true;
+        env.save(payload);
+      });
+      div.on('drop', function(event) {
+        event.preventDefault();
+
+        div.css({border: '2px solid red'}).text('DROP');
+        payload.didDrop = true;
+        env.save(payload);
+      });
+    }
+
+    return div[0];
+  }
+};

demo/app/mobiledoc-cards/html.js

@@ -3,11 +3,13 @@ import selfie from './html/selfie';
 import simple from './html/simple';
 import image from './html/image';
 import codemirror from './html/codemirror';
+import dragoverCard from './html/dragover';
 
 export default [
   input,
   selfie,
   simple,
   image,
-  codemirror
+  codemirror,
+  dragoverCard
 ];

demo/app/mobiledoc-cards/html/dragover.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'dragover',
+  type: 'html',
+  render({payload}) {
+    return 'Hello, ' + (payload.didDrop ? 'did drop' : 'did not drop') +
+      ', ' + (payload.didDrag ? 'did drag' : 'did not drag');
+  }
+};

demo/app/mobiledoc-cards/text.js

@@ -3,11 +3,13 @@ import simpleCard from './text/simple';
 import inputCard from './text/input';
 import imageCard from './text/image';
 import selfieCard from './text/selfie';
+import dragoverCard from './text/dragover';
 
 export default [
   codemirrorCard,
   simpleCard,
   inputCard,
   imageCard,
-  selfieCard
+  selfieCard,
+  dragoverCard
 ];

demo/app/mobiledoc-cards/text/dragover.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'dragover',
+  type: 'text',
+  render({payload}) {
+    return 'Hello, ' + (payload.didDrop ? 'did drop' : 'did not drop') +
+      ', ' + (payload.didDrag ? 'did drag' : 'did not drag');
+  }
+};

demo/app/mobiledocs/index.js

@@ -1,4 +1,21 @@
 export default {
+  dragover: {
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [
+      ['dragover', {}]
+    ],
+    sections: [
+      [1, 'h2', [
+        [0, [], 0, 'Mention Atom']
+      ]],
+      [10, 0],
+      [1, 'P', [
+        [0, [], 0, 'some text'],
+      ]]
+    ]
+  },
   mentionAtom: {
     version: '0.3.0',
     atoms: [

demo/app/templates/index.hbs

@@ -30,6 +30,7 @@
         <option value='selfieCard'>Selfie Card</option>
         <option value='codemirrorCard'>Codemirror Card</option>
         <option value='mentionAtom'>Mention Atom</option>
+        <option value='dragover'>Drag drop cards</option>
       </select>
       {{#mobiledoc-editor
           class='post-editor__editor'