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*/ +