Make freezed a status of the component

src/dom_components/view/ComponentView.js

@@ -100,22 +100,27 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   updateStatus(e) {
-    var s = this.model.get('status');
+    var el = this.el;
+    var status = this.model.get('status');
     var pfx = this.pfx;
-    var selectedClass = pfx + 'selected';
+    var ppfx = this.ppfx;
-    var selectedParentClass = selectedClass + '-parent';
+    var selectedCls = pfx + 'selected';
+    var selectedParentCls = selectedCls + '-parent';
+    var freezedCls = `${ppfx}freezed`;
+    var actualCls = el.getAttribute('class');
 
-    switch(s) {
+    switch (status) {
         case 'selected':
-          this.$el.addClass(selectedClass);
+          el.setAttribute('class', `${actualCls} ${selectedCls}`);
-            break;
+          break;
         case 'selected-parent':
-          this.$el.addClass(selectedParentClass);
+          el.setAttribute('class', `${actualCls} ${selectedParentCls}`);
-            break;
+          break;
-        case 'moving':
+        case 'freezed':
-            break;
+          el.setAttribute('class', `${actualCls} ${freezedCls}`);
+          break;
         default:
-          this.$el.removeClass(`${selectedClass} ${selectedParentClass}`);
+          this.$el.removeClass(`${selectedCls} ${selectedParentCls} ${freezedCls}`);
     }
   },
 

src/utils/Sorter.js

@@ -220,26 +220,27 @@ module.exports = Backbone.View.extend({
 
   /**
    * Picking component to move
-   * @param {HTMLElement} trg
+   * @param {HTMLElement} src
    * */
-  startSort(trg) {
+  startSort(src) {
     this.dropModel = null;
     this.moved = 0;
+    //this.$document = $([document, trg.ownerDocument]);
 
-    if(trg && !this.matches(trg, this.itemSel + ',' + this.containerSel))
+    if(src && !this.matches(src, this.itemSel + ',' + this.containerSel))
-      trg = this.closest(trg, this.itemSel);
+      src = this.closest(src, this.itemSel);
 
-    this.eV = trg;
+    this.eV = src;
 
     // Create placeholder if not exists
-    if(!this.plh) {
+    if (!this.plh) {
       this.plh = this.createPlaceholder();
       this.getContainerEl().appendChild(this.plh);
     }
 
-    if(trg) {
+    if (src) {
-      var className = trg.getAttribute('class');
+      var srcModel = this.getSourceModel();
-      trg.setAttribute('class', `${className} ${this.freezeClass}`);
+      srcModel.set('status', 'freezed');
       this.$document.on('mouseup', this.endMove);
     }
 
@@ -728,15 +729,15 @@ module.exports = Backbone.View.extend({
     this.$document.off('keydown', this.rollback);
     this.plh.style.display = 'none';
     var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi');
-    let trg = this.eV;
+    let src = this.eV;
 
-    if (trg) {
+    if (src) {
-      var className = (trg.getAttribute('class')+'').replace(clsReg, '');
+      var srcModel = this.getSourceModel();
-      trg.setAttribute('class', className);
+      srcModel.set('status', 'selected');
     }
 
     if(this.moved)
-      created = this.move(this.target, trg, this.lastPos);
+      created = this.move(this.target, src, this.lastPos);
     if(this.plh)
       this.plh.style.display = 'none';