Question

我创建了可拖动div，因为我添加了一些标题和p标记，但是当我在触摸屏上运行该特定索引页面时，我无法拖动div标记，对此我想要的最佳解决方案是什么在触摸屏上运行此页面，有人会为此提供最佳解决方案吗？

           <!DOCTYPE html>
            <html>
             <body>
            <h1>Draggable DIV Element</h1>
             <p>Click and hold the mouse button down while moving the DIV 
             element</p>

            <div id="mydiv">
            <div id="mydivheader">Click here to move</div>
            <p>Move</p>
            <p>this</p>
            <p>DIV</p>
            </div>

            <script>
            //Make the DIV element draggagle javscript code :
            dragElement(document.getElementById("mydiv"));

            function dragElement(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            if (document.getElementById(elmnt.id + "header"))
            {
           /* if present, the header is where you move the DIV from:*/
            document.getElementById(elmnt.id + "header").onmousedown = 
            dragMouseDown;
           } 
            else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            elmnt.onmousedown = dragMouseDown;
           }

          function dragMouseDown(e) {
           e = e || window.event;
            e.preventDefault();
          // get the mouse cursor position at startup:
           pos3 = e.clientX;
           pos4 = e.clientY;
           document.onmouseup = closeDragElement;
           // call a function whenever the cursor moves:
           document.onmousemove = elementDrag;
          }

            function elementDrag(e) {
             e = e || window.event;
             e.preventDefault();
             // calculate the new cursor position:
             pos1 = pos3 - e.clientX;
             pos2 = pos4 - e.clientY;
             pos3 = e.clientX;
             pos4 = e.clientY;
             // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
           }

             function closeDragElement() {
              /* stop moving when mouse button is released:*/
             document.onmouseup = null;
             document.onmousemove = null;
             }
           }
          </script>

         </body>
       </html>

Answer 1

可以在触摸设备上模拟鼠标事件，但并非总是如此。您需要支持touch events以及鼠标事件。
当浏览器模拟鼠标事件时，请小心不要触发两次事件处理程序。

由于您使用的是JQuery，因此您可能会对Pointer Events Polyfill感兴趣。

为什么我的HTML Draggable在触摸屏上不起作用？

1 个答案: