Make the component placeholder 50% opaque

Disable dragging on attached components

modules/cms/assets/css/october.components.css

@@ -201,6 +201,10 @@ div.control-componentlist div.components div.layout-cell.adding > div {
   -ms-transform: translate(0, -100px) !important;
   transform: translate(0, -100px) !important;
 }
+.draggable-component-item {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
 .draggable-component-item span.alias {
   display: none;
 }

modules/cms/assets/js/october.cmspage.js

@@ -512,6 +512,7 @@
             // Set the last alias used so dragComponents can use it
             $('input[name="component_aliases[]"]', $(this)).val(alias)
 
+            $component.attr('data-component-attached', true)
             $componentContainer.addClass($iconInput.val())
             $iconInput.remove()
             $componentContainer.attr('data-inspectable', '')

modules/cms/assets/js/october.dragcomponents.js

@@ -33,11 +33,15 @@
             editorPos
 
         $el.mousedown(function(event){
+            if ($el.data('component-attached')) return
+
             startDrag(event)
             return false
         })
 
         $el.on('touchstart', function(event){
+            if ($el.data('component-attached')) return
+
             var touchEvent = event.originalEvent;
             if (touchEvent.touches.length == 1) {
                 startDrag(touchEvent.touches[0])
@@ -171,8 +175,10 @@
                 $editor.insert("{% component '" + alias + "' %}")
             }
 
-            $editor.removeAllListeners('mousemove')
-            $editor.blur()
+            if ($editor) {
+                $editor.removeAllListeners('mousemove')
+                $editor.blur()
+            }
         }
 
         function collision($div1, $div2) {

modules/cms/assets/less/october.components.less

@@ -213,6 +213,7 @@ div.control-componentlist {
 }
 
 .draggable-component-item {
+    .opacity(.5);
     span.alias { display: none; }
     a.remove { display: none; }
 }