Создание нескольких независимых элементов перетаскивания с помощью JavaScript - PullRequest
Новая
       0

Создание нескольких независимых элементов перетаскивания с помощью JavaScript

0 голосов
/ 27 мая 2020

В приведенном ниже коде есть слово hello, которое является событием перетаскивания touchmove в JavaScript. Пользователь может перемещать слово hello по экрану пальцами на сенсорном устройстве. Как я могу получить много hellos, чтобы пользователь мог перемещать их все на ощупь, независимо друг от друга.

Я пробовал дублировать элемент, но это не сработало. 

            var dragItem = document.querySelector("#item");

            var container = document.querySelector("#container");

            var active = false;

            var currentX;

            var currentY;

            var initialX;

            var initialY;

            var xOffset = 0;

            var yOffset = 0;

            container.addEventListener("touchstart", dragStart, false);

            container.addEventListener("touchend", dragEnd, false);

            container.addEventListener("touchmove", drag, false);

            container.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;

                }

                if (e.target === dragItem) {

                    active = true;

                }

            }

            function dragEnd(e) {

                initialX = currentX;

                initialY = currentY;

                active = false;

            }

            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;

                    setTranslate(currentX, currentY, dragItem);

                }

            }

            function setTranslate(xPos, yPos, el) {

                el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";

            }
 #container {

                width: 100%;

                height: 400px;

                background-color: white;

                display: flex;

                align-items: center;

                justify-content: center;

                overflow: hidden;

                border-radius: 7px;

                touch-action: none;

            }

            #item {

                width: 100px;

                height: 0px;

                background-color:transparent;

                border: 0px solid rgba(136, 136, 136, 0.5);

                border-radius: 50%;

                touch-action: none;

                user-select: none; text-align: center;

            }

            #item:active {

                background-color: white;

            }

            #item:hover {

                cursor: pointer;

                border-width: 0px;

            }
 <!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

        <title>text</title>

        <style>

           

        </style>

    </head>

    <body>

        <div id="outerContainer">

            <div id="container">

                <div id="item">hello 
                  

                    

                </div>

            </div>

        </div>

        <script>



        </script>

    </body>

    </html>

1 Ответ

0 голосов
/ 27 мая 2020

Вам нужно сделать dragItem динамику c. Установите dragItem в функции dragStart() с помощью e.target. И сохраните xOffset и yOffset в соответствующем dragItem. 

            var dragItem;

            var container = document.querySelector("#container");

            var active = false;

            var currentX;

            var currentY;

            var initialX;

            var initialY;

            var xOffset = 0;

            var yOffset = 0;

            container.addEventListener("touchstart", dragStart, false);

            container.addEventListener("touchend", dragEnd, false);

            container.addEventListener("touchmove", drag, false);

            container.addEventListener("mousedown", dragStart, false);

            container.addEventListener("mouseup", dragEnd, false);

            container.addEventListener("mousemove", drag, false);

            function dragStart(e) {
                dragItem=e.target;
                if(dragItem.xOffset==undefined){
                  dragItem.xOffset=0;
                }
                 if(dragItem.yOffset==undefined){
                  dragItem.yOffset=0;
                }
                if (e.type === "touchstart") {

                    initialX = e.touches[0].clientX - dragItem.xOffset;

                    initialY = e.touches[0].clientY - dragItem.yOffset;

                } else {

                    initialX = e.clientX -(dragItem.xOffset||0);

                    initialY = e.clientY -(dragItem.xOffset||0);

                }
                     console.log(initialX);
                     console.log(initialY);
            //    if (e.target === dragItem) {

                    active = true;

              //  }

            }

            function dragEnd(e) {

                active = false;

            }

            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;

                    }

dragItem.xOffset = currentX;

                    dragItem.yOffset = currentY;

                    setTranslate(currentX, currentY, dragItem);

                }

            }

            function setTranslate(xPos, yPos, el) {

                el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";

            }
#container {

                width: 100%;

                height: 400px;

                background-color: white;

                display: flex;

                align-items: center;

                justify-content: center;

                overflow: hidden;

                border-radius: 7px;

                touch-action: none;

            }

            .container div {

                width: 100px;

                height: 0px;

                background-color:transparent;

                border: 0px solid rgba(136, 136, 136, 0.5);

                border-radius: 50%;

                touch-action: none;

                user-select: none; text-align: center;

            }

           .container div:active {

                background-color: white;

            }

           .container div:hover {

                cursor: pointer;

                border-width: 0px;

            }
<!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

        <title>text</title>

        <style>

           

        </style>

    </head>

    <body>

        <div id="outerContainer">

            <div id="container">

                <div>hello 1                </div>

                  
                <div>hello 2

                    

                </div>

            </div>

        </div>

        <script>



        </script>

    </body>

    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...