More glitch fixes on module builder

_layouts/rule.html

@@ -19,9 +19,16 @@ layout: default
   function drop(ev) {
       ev.preventDefault();
       var target = ev.target;
-      // Prevents dropping into text field
-      if (target.id == "drag-directions") {
-          target = target.parentElement;
+      if (target.id != "module-input") { // First, confirm location is valid
+          // Prevents dropping into dummy text field
+          if (target.id == "drag-directions") {
+              target = target.parentElement;
+          } else if (!document.getElementById("module-input").contains(target) ||
+                     document.getElementById("module-menu").contains(target)) {
+              // Ignore destinations not in the correct area
+              console.log(target);
+              return;
+          }
       }
       // Set up transfer
       var data = ev.dataTransfer.getData("text");
@@ -34,6 +41,12 @@ layout: default
           if (module.id == "module-custom") {
               // For custom modules:
               name = module.getElementsByTagName("input")[0].value;
+              // While we're at it, replace the <input> with text
+              module.getElementsByTagName("input")[0].remove();
+              var customText = document.createElement("span");
+              customText.append(name);
+              customText.id = "module-name";
+              module.prepend(customText);
           } else {
               // For predefined modules
               name = module.innerHTML.replace(/(<([^>]+)>)/ig,'');
@@ -420,7 +433,7 @@ layout: default
          class="modulebox" id="module-input">
       <span class="question" id="drag-directions">
         Drag modules from the icon at right</span>      
-      <div class="button">
+      <div class="button" id="module-hover">
         <img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
         <div class="tooltiptext" id="module-menu">
           <!-- Customizable module -->
@@ -437,7 +450,7 @@ layout: default
 		  {% for module in site.data.modules %}
 		  <span class="module" id="module-{{ module.id }}"
 			  draggable="true" ondragstart="drag(event)">
-		    <span>{{ module.name }}</span>
+		    <span id="module-name">{{ module.name }}</span>
             <a target="_blank" href="{{ module.url }}" class="module-link">
               <img title="{{ module.type }}" draggable="false" 
                    {% if module.type == "structure" %}