drag data

Author: Theo-Jaunet

assets/css/main.css

@@ -972,6 +972,12 @@ p, h3, h4, h5, img {
 .dataRow {
     display: flex;
     justify-content: center;
+    padding: 4px;
+}
+
+.dataRow:hover {
+  border: solid 1px #424242;
+    cursor:grab;
 }
 
 .dataColumn {

assets/js/datasetStuff.js

@@ -34,5 +34,14 @@ function fillSidePanel() {
 
     }
 
+    const elements =  document.querySelectorAll(".dataRow")
+
+    for (let i = 0; i <elements.length; i++) {
+
+
+        dragElement2(elements[i])
+    }
+
+
 
 }

assets/js/dragStuff.js

@@ -11,7 +11,6 @@ function dragElement(elmnt) {
 
     elmnt.onmousedown = dragMouseDown;
 
-
     function dragMouseDown(e) {
         e = e || window.event;
         e.preventDefault();
@@ -80,6 +79,73 @@ function dragElement(elmnt) {
 }
 
 
+function dragElement2(elmnt) {
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+
+    elmnt.onmousedown = dragMouseDown;
+
+    function dragMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+
+        console.log();
+        const rect = elmnt.getBoundingClientRect();
+
+        offsetX = e.clientX - rect.left
+        offsetY = e.clientY - rect.top;
+
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+
+        // set the element's new position:
+        elmnt.style.position = "absolute";
+
+        let tcords = elmnt.parentElement.getBoundingClientRect();
+
+        elmnt.style.left =
+            ((e.pageX - offsetX) - tcords.x) + "px";
+
+        elmnt.style.top =
+            ((e.pageY - offsetY + 50) - 50) + "px";
+
+        // elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        // elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+
+    }
+
+    function closeDragElement(e) {
+        // stop moving when mouse button is released:
+        elmnt.style.position = "";
+        elmnt.style.top = ""
+        elmnt.style.left = ""
+        document.onmouseup = null;
+        document.onmousemove = null;
+        dragging = false
+
+
+        if (e.target.matches("#paletteDetails")) {
+
+        }
+
+
+    }
+}
+
+
 function dropPalette(e, elmnt) {
 
     if (e.target.matches("#paletteCont") || e.target.matches(".paletteMark") || e.target.matches(".paletteMarks")) {

index.html

@@ -227,7 +227,9 @@ <h3 style="display: inline;font-weight:700;margin-left:10px;color: #eeeeee">Desc
                     <p style="margin: 0;font-size:16pt;font-weight: 600;"> Dataset</p>
                     <select id="availableData"> </select>
                     <button onclick="">Import CSV</button>
-                    <div id="datasetInfo"> </div>
+                    <h5>Data Columns</h5>
+
+                    <div id="datasetInfo" style="border-top:  solid 1px #424242"> </div>
                 </div>