Update Droppable

src/block_manager/index.js

@@ -23,9 +23,10 @@
  * * `block:add` - Block added. The [Block] is passed as an argument to the callback.
  * * `block:remove` - Block removed. The [Block] is passed as an argument to the callback.
  * * `block:update` - Block updated. The [Block] and the object containing changes are passed as arguments to the callback.
- * * `block:drag:start` - Started dragging block, model of the block is passed as an argument
+ * * `block:drag:start` - Started dragging block, the [Block] is passed as an argument.
- * * `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
+ * * `block:drag` - Dragging block, the [Block] is passed as an argument.
- * * `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
+ * * `block:drag:stop` - Dragging of the block is stopped. The dropped [Component] (if dropped successfully) and the [Block] are passed as arguments.
+ * * `block` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
  *
  * ## Methods
  * * [add](#add)
@@ -39,6 +40,7 @@
  * * [render](#render)
  *
  * [Block]: block.html
+ * [Component]: component.html
  *
  * @module BlockManager
  */
@@ -118,19 +120,27 @@ export default () => {
         container: bhv.container,
         drag: block => {
           const cnt = block.getContent ? block.getContent() : block;
-          this.em.set('dragContent', cnt);
+          this.__sorterStart(cnt);
-          this.__startSorter(block);
+        },
-        }
+        dragStop: cancel => this.__sorterEnd(cancel)
       };
     },
 
-    __startSorter(block) {
+    __sorterStart(content) {
       // block:drag
-      const frameViews = this.em
+      this.em.set('dragContent', content);
+      this.__getFrameViews().forEach(fv => fv.droppable.startCustom());
+    },
+
+    __sorterEnd(cancel) {
+      this.__getFrameViews().forEach(fv => fv.droppable.endCustom(cancel));
+    },
+
+    __getFrameViews() {
+      return this.em
         .get('Canvas')
         .getFrames()
         .map(frame => frame.view);
-      frameViews.forEach(fv => fv.droppable.startCustom());
     },
 
     __behaviour(opts = {}) {

src/utils/Droppable.js

@@ -69,10 +69,15 @@ export default class Droppable {
     this.__customTglEff(true);
   }
 
+  endCustom(cancel) {
+    this.endDrop(cancel);
+  }
+
   endDrop(cancel, ev) {
     const { em, dragStop } = this;
     this.counter = 0;
     dragStop && dragStop(cancel);
+    this.__customTglEff(false);
     em.trigger('canvas:dragend', ev);
   }
 
@@ -184,7 +189,6 @@ export default class Droppable {
     ev.target.style.border = '';
     content && dragContent && dragContent(content);
     this.endDrop(!content, ev);
-    this.__customTglEff(false);
   }
 
   getContentByData(dt) {