• TOP
케이홈테마 상담신청
  • 문의항목
  • 성함
  • 이메일
  • 연락처
  • 제목
Fullfill Heart, Design Dream
BUISINESS
팝업
기존팝업 드래그 기능 추가
  • 등록일2024.12.03
  • 조회수72

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>

댓글 0

댓글목록

등록된 댓글이 없습니다.