Add `getEl` in Component

src/asset_manager/view/FileUploader.js

@@ -290,7 +290,8 @@ module.exports = Backbone.View.extend(
            */
 
             /*
-            // Show local video files
+            // Show local video files, http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
+            var URL = window.URL || window.webkitURL
             var file = this.files[0]
              var type = file.type
              var videoNode = document.createElement('video');

src/canvas/index.js

@@ -1,4 +1,5 @@
 import { on, off } from 'utils/mixins';
+import Droppable from 'utils/Droppable';
 
 module.exports = () => {
   var c = {},
@@ -393,6 +394,10 @@ module.exports = () => {
       return [this.getFrameEl().contentWindow, this.getElement()];
     },
 
+    postRender() {
+      this.droppable = new Droppable(c.em);
+    },
+
     /**
      * Returns wrapper element
      * @return {HTMLElement}

src/dom_components/model/Component.js

@@ -690,6 +690,15 @@ const Component = Backbone.Model.extend(Styleable).extend(
       return attrs.id || this.ccid || this.cid;
     },
 
+    /**
+     * Get the DOM element of the model. This works only of the
+     * model is alredy rendered
+     * @return {HTMLElement}
+     */
+    getEl() {
+      return this.view && this.view.el;
+    },
+
     /**
      * Return script in string format, cleans 'function() {..' from scripts
      * if it's a function

src/utils/Droppable.js

@@ -1,13 +1,14 @@
 import { on, off } from 'utils/mixins';
 import { bindAll } from 'underscore';
 
-export class Droppable {
+export default class Droppable {
   constructor(em) {
     this.em = em;
-    this.el = this.em
+    const el = em
       .get('DomComponents')
       .getWrapper()
       .getEl();
+    this.el = el;
     this.counter = 0;
     bindAll(
       this,
@@ -47,32 +48,29 @@ export class Droppable {
   }
 
   handleDragEnter(ev) {
+    const em = this.em;
     this.updateCounter(1);
     if (this.over) return;
     this.over = 1;
     console.log('IM IN');
 
-    var utils = this.em.get('Utils');
-    var canvas = this.em.get('Canvas');
+    const utils = em.get('Utils');
+    const canvas = em.get('Canvas');
     this.sorter = new utils.Sorter({
+      em,
+      wmargin: 1,
+      nested: 1,
+      canvasRelative: 1,
+      direction: 'a',
       container: canvas.getBody(),
       placer: canvas.getPlacerEl(),
       eventMoving: 'mousemove dragover',
       containerSel: '*',
       itemSel: '*',
       pfx: 'gjs-',
-      onStart: () => {
-        this.em.stopDefault();
-      },
-      onEndMove: () => {
-        this.em.runDefault();
-      },
-      document: canvas.getFrameEl().contentDocument,
-      direction: 'a',
-      wmargin: 1,
-      nested: 1,
-      em,
-      canvasRelative: 1
+      onStart: () => em.stopDefault(),
+      onEndMove: () => em.runDefault(),
+      document: canvas.getFrameEl().contentDocument
     });
     const content = this.getContentByData(ev.dataTransfer) || '<br>';
     this.sorter.setDropContent(content); // should not be empty