- 등록일2024.12.03
- 조회수75
tail.php 파일 맨 하단에 아래 스크립트 추가
<script>
// ForEach for NodeList :: Polyfill (IE를 위하여)
if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
// Yes, there's really no need for `Object.defineProperty` here
NodeList.prototype.forEach = Array.prototype.forEach;
}
// 기존 팝업 드래그 기능
$(function() {
function DragPopup(movable, dragItem) {
// 모바일에서는 사용안함.
if (window.innerWidth < 768) return;
var container = document.body;
var active = false;
var active2 = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
var transition;
dragItem.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
dragItem.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
transition = movable.style.transition;
movable.style.transition = 'none';
active = true;
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
movable.style.transition = transition;
active = false;
setTimeout(function () {
active2 = false;
}, 50);
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;
active2 = true;
setTranslate(currentX, currentY, movable);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
dragItem.addEventListener('click', function (e) {
if (active2) {
e.stopPropagation(); e.preventDefault();
return false;
}
});
}
var popups = document.querySelectorAll('#hd_pop .hd_pops');
popups.forEach(function (el) {
new DragPopup(el, el);
});
});
</script>