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: ''
,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 d0a1cc77..615f7aca 100644
--- a/src/main/webapp/resources/framework/css/cmmn/common-style.css
+++ b/src/main/webapp/resources/framework/css/cmmn/common-style.css
@@ -2002,4 +2002,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) {
*/
- // 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*/
+