From 012ce623bb3b92673eaa4d817a4fedb8c68332ce Mon Sep 17 00:00:00 2001
From: Kurt92 <chcch1234@gmail.com>
Date: Wed, 14 Dec 2022 15:24:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EB=93=9C=EB=A0=88=EA=B7=B8=20=EC=95=A4=20=EB=93=9C?=
 =?UTF-8?q?=EB=A1=AD=20=EC=9E=91=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp |  3 +
 .../framework/css/cmmn/common-style.css       |  7 ++
 .../framework/js/cmm/cmmDownloadImg.js        | 75 ++++++++++++++++---
 3 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp
index 27abae36..e5cbac2c 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp
@@ -244,6 +244,7 @@
 			
 			cmmAjax({
 				showSuccessMsg: false
+				,async: false
 				,url: '<c:url value="/fims/biz/ec/findNatlNewspaperAttchFiles.do"/>'
 				,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'}
 				,success: (res) => {
@@ -299,6 +300,8 @@
 	$(document).ready(function () {
 //		orgData = $('form').serialize();
 		fnBiz.downloadImg();
+		dragable();
+
 	});
 
 
diff --git a/src/main/webapp/resources/framework/css/cmmn/common-style.css b/src/main/webapp/resources/framework/css/cmmn/common-style.css
index 049e325e..72d8d0fc 100644
--- a/src/main/webapp/resources/framework/css/cmmn/common-style.css
+++ b/src/main/webapp/resources/framework/css/cmmn/common-style.css
@@ -1998,4 +1998,11 @@ div.guide ul li{
 .required label:after {
 	content: '*';
 	color: red;
+}
+
+.dragDiv {
+	margin: 10px;
+	padding: 10px;
+	background-color: #b5c1dc57;
+	border-radius: 8px;
 }
\ No newline at end of file
diff --git a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
index e2b68a13..a012c0b7 100644
--- a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
+++ b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
@@ -17,13 +17,13 @@ function sttemntImgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
 			<div id="ctznImg"></div>
 		</div>
      */
-    // let imgEl = document.querySelector(appendElementId);
-    // if(imgEl?.hasChildNodes()){
-    //     imgEl.parentNode.removeChild(imgEl);
-    // }
-    // imgEl = document.createElement("div");
-    // //FIXME: id 고정(#ctznImg - 변경불가)
-    // imgEl.setAttribute("id", 'ctznImg');
+    /*let imgEl = document.querySelector(appendElementId);
+    if(imgEl?.hasChildNodes()){
+        imgEl.parentNode.removeChild(imgEl);
+    }
+    imgEl = document.createElement("div");
+    //FIXME: id 고정(#ctznImg - 변경불가)
+    imgEl.setAttribute("id", 'ctznImg');*/
 
 
     cmmFileDtls.forEach((dtl, idx) => {
@@ -32,7 +32,7 @@ function sttemntImgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
             imgEl = document.createElement("div");
             //FIXME: id 고정(#ctznImg - 변경불가)
             imgEl.setAttribute("id", dtl.fileJobId);
-            //imgEl.setAttribute("class", "draggable")
+            imgEl.setAttribute("class", "dragDiv")
         }
 
         const params = "?filename=" + $.param(dtl);
@@ -42,6 +42,7 @@ function sttemntImgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
         //x.setAttribute("class", "draggable")
         x.setAttribute("src", downloadUrl+params);
         x.setAttribute("id", dtl.fileId);
+        x.setAttribute("class", "draggable")
         x.style = 'width:150px;';
         x.style = 'height:150px;';
         //x.setAttribute("object-fit", "cover");
@@ -57,7 +58,7 @@ function sttemntImgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
             x.setAttribute("data-interface-seq-n", reqDTO.interfaceSeqN);
             x.setAttribute("data-ctzn-sttemnt-detail-sn", reqDTO.ctznSttemntDetailSn);
         }
-        x.addEventListener('click', (e)=>{
+        x.addEventListener('dblclick', (e)=>{
             if(isEditor) {
                 fnBiz.pagePopup('imageEditor', {imageTagId: dtl.fileId});
             }else{
@@ -164,3 +165,59 @@ function downloadAll(imgs, ext, limit) {
     }
 }
 
+
+
+/*이미지 드레그앤 드롭 start*/
+function dragable() {
+    const draggables = document.querySelectorAll(".draggable");
+    const containers = document.querySelectorAll(".dragDiv");
+    console.log('draggable', draggables);
+
+
+    draggables.forEach(draggable => {
+        console.log(draggable);
+        draggable.addEventListener("dragstart", () => {
+            console.log('drag start')
+            draggable.classList.add("dragging");
+        });
+
+        draggable.addEventListener("dragend", () => {
+            console.log('drag end')
+            draggable.classList.remove("dragging");
+        });
+    });
+
+    containers.forEach(container => {
+        container.addEventListener("dragover", e => {
+            e.preventDefault();
+            const afterElement = getDragAfterElement(container, e.clientX);
+            const draggable = document.querySelector(".dragging");
+            if (afterElement === undefined) {
+                container.appendChild(draggable);
+            } else {
+                container.insertBefore(draggable, afterElement);
+            }
+        });
+    });
+}
+function getDragAfterElement(container, x) {
+    const draggableElements = [
+        ...container.querySelectorAll(".draggable:not(.dragging)"),
+    ];
+
+    return draggableElements.reduce(
+        (closest, child) => {
+            const box = child.getBoundingClientRect();
+            const offset = x - box.left - box.width / 2;
+            // console.log(offset);
+            if (offset < 0 && offset > closest.offset) {
+                return { offset: offset, element: child };
+            } else {
+                return closest;
+            }
+        },
+        { offset: Number.NEGATIVE_INFINITY },
+    ).element;
+}
+/*이미지 드레그앤 드롭 end*/
+