Update cl.js

cl.js

@@ -10,13 +10,12 @@
     width: 500px;
     height: 350px;
     background: rgba(0,0,0,0.8);
-    top: 50px; /* 初期位置を指定 */
+    top: 0;
     left: 0;
     right: 0;
-    margin: auto;
+    margin: 50px auto;
     font-size: 0;
     z-index: 100000;
-    cursor: move; /* ドラッグカーソルを追加 */
   }
   evalcontainer > textarea.EVALTEXTAREA {
     width: 500px;
@@ -91,14 +90,20 @@
     border: none;
     padding: 5px;
     cursor: pointer;
+  }
+  .draggable-icon {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    font-size: 20px;
+    cursor: move; /* ドラッグカーソルを追加 */
   }
     `;
     document.head.appendChild(s);
   }
   if (!document.querySelector('evalcontainer')) {
     s=document.createElement("evalcontainer");
-    s.setAttribute("draggable", "true"); // draggable属性を追加
-
+    
     // 右上の「×」ボタンを追加
     var closeButton = document.createElement("button");
     closeButton.className = "close-button";
@@ -108,6 +113,12 @@
     };
     s.appendChild(closeButton);
 
+    // ドラッグアイコンを追加
+    var dragIcon = document.createElement("div");
+    dragIcon.className = "draggable-icon";
+    dragIcon.innerText = "🖱️";
+    s.appendChild(dragIcon);
+    
     var output=document.createElement("evaloutput");
     function createOutputEntry(words) {
       var t=document.createElement("evaloutputentry");
@@ -153,7 +164,7 @@
               t.classList.add('EVALUNDEFINED');
               break;
             case 'symbol':
-              evaloutput=evaloutput.toString();
+            evaloutput=evaloutput.toString();
               t.classList.add('EVALSTRING');
               break;
           }
@@ -181,22 +192,31 @@
       }
     };
 
-    // ドラッグ機能を実装
-    s.ondragstart = function(e) {
-      e.dataTransfer.setData('text/plain', null); // Firefox用にデータをセット
-    };
+    // ドラッグ機能を実装 (ドラッグアンドドロップAPIを使用)
+    s.setAttribute('draggable', true);
 
-    document.ondragover = function(e) {
-      e.preventDefault(); // ドロップを許可
-    };
+    s.addEventListener('dragstart', function(e) {
+      e.dataTransfer.setData('text/plain', null); // Firefoxのためのダミーデータ
+      const rect = s.getBoundingClientRect();
+      e.dataTransfer.setData('text/plain', JSON.stringify({
+        offsetX: e.clientX - rect.left,
+        offsetY: e.clientY - rect.top
+      }));
+    });
 
-    document.ondrop = function(e) {
+    document.addEventListener('dragover', function(e) {
       e.preventDefault();
-      // ドロップした位置にエディタを移動
-      const rect = s.getBoundingClientRect();
-      s.style.left = (e.clientX - rect.width / 2) + 'px';
-      s.style.top = (e.clientY - rect.height / 2) + 'px';
-    };
+    });
+
+    document.addEventListener('drop', function(e) {
+      e.preventDefault();
+      const data = e.dataTransfer.getData('text/plain');
+      if (data) {
+        const { offsetX, offsetY } = JSON.parse(data);
+        s.style.left = (e.clientX - offsetX) + 'px';
+        s.style.top = (e.clientY - offsetY) + 'px';
+      }
+    });
 
     function merp(u,t) {
       switch (typeof u) {