• 移动化拖拽元素移动

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>Documenttitle>
    16.  
    17.     <style>
    18.  
    19.         body{
    20.  
    21.             margin: 0;
    22.  
    23.         }
    24.  
    25.         #touchMove {
    26.  
    27.             position: relative;
    28.  
    29.             width: 100px;
    30.  
    31.             border: 1px solid red;
    32.  
    33.         }
    34.  
    35.     style>
    36.  
    37. head>
    38.  
    39.  
    40.  
    41. <body>
    42.  
    43.     <div id="touchMove" class="">开始体验div>
    44.  
    45.  
    46.  
    47.     <script>
    48.  
    49.         window.onload = function () {
    50.  
    51.  
    52.  
    53.             var oDiv = document.getElementById('touchMove');
    54.  
    55.             var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
    56.  
    57.             oDiv.addEventListener('touchstart', function (e) {
    58.  
    59.                 e.preventDefault();//阻止触摸时页面的滚动，缩放
    60.  
    61.                 oDiv.style.transition = 'none'
    62.  
    63.                 disX = e.touches[0].clientX - this.offsetLeft;
    64.  
    65.                 disY = e.touches[0].clientY - this.offsetTop;
    66.  
    67.                 //手指按下时的坐标
    68.  
    69.                 starX = e.touches[0].clientX;
    70.  
    71.                 starY = e.touches[0].clientY;
    72.  
    73.                 //console.log(disX);
    74.  
    75.             });
    76.  
    77.  
    78.  
    79.             oDiv.addEventListener('touchmove', function (e) {
    80.  
    81.                 L = e.touches[0].clientX - disX;
    82.  
    83.                 T = e.touches[0].clientY - disY;
    84.  
    85.                 //移动时 当前位置与起始位置之间的差值
    86.  
    87.                 starXEnd = e.touches[0].clientX - starX;
    88.  
    89.                 starYEnd = e.touches[0].clientY - starY;
    90.  
    91.                 console.log( e.touches[0].clientX , disX);
    92.  
    93.                 if (L < 0) {//限制拖拽的X范围，不能拖出屏幕
    94.  
    95.                     L = 0;
    96.  
    97.                 }else if (L > document.documentElement.clientWidth - this.offsetWidth) {
    98.  
    99.                     L = document.documentElement.clientWidth - this.offsetWidth;
    100.  
    101.                 }
    102.  
    103.                 if (T < 0) {//限制拖拽的Y范围，不能拖出屏幕
    104.  
    105.                     T = 0;
    106.  
    107.                 }else if (T > document.documentElement.clientHeight - this.offsetHeight) {
    108.  
    109.                     T = document.documentElement.clientHeight - this.offsetHeight;
    110.  
    111.                 }
    112.  
    113.                 moveX = L + 'px';
    114.  
    115.                 moveY = T + 'px';
    116.  
    117.                 this.style.left = moveX;
    118.  
    119.                 this.style.top = moveY;
    120.  
    121.                 console.log(moveX);
    122.  
    123.             });
    124.  
    125.  
    126.  
    127.             window.addEventListener('touchend', function (e) {
    128.  
    129.                 //alert(parseInt(moveX))
    130.  
    131.                 //判断滑动方向
    132.  
    133.                 //判断滑动方向
    134.  
    135.                 oDiv.style.transition = 'all 0.3s'
    136.  
    137.                 if (L > document.documentElement.clientWidth / 2) {
    138.  
    139.                     oDiv.style.left = document.documentElement.clientWidth - oDiv.offsetWidth  + 'px'
    140.  
    141.                 } else {
    142.  
    143.                     oDiv.style.left = 0
    144.  
    145.                 }
    146.  
    147.             });
    148.  
    149.  
    150.  
    151.         }
    152.  
    153.     script>
    154.  
    155. body>
    156.  
    157.  
    158.  
    159. html>

  • 相关阅读:
    单片机STM32有什么推荐的裸机编程架构
    常见的 NoSQL 数据库有哪些？
    世界环境日 | 周大福用心服务推动减碳环保
    数据化运营05 关注用户留存就够了吗？值得你关注的另外 3 种留存
    冰蝎的原理与安装使用
    《STL源码剖析》笔记——allocator
    MySQL——连接查询与子查询
    C++面试连环问-STL
    Linux gcc 预处理，编译，汇编，链接的命令打字练习
    Go/Golang语言学习实践[回顾]教程13--详解Go语言的词法解析单元
  • 原文地址：https://blog.csdn.net/qq_43649479/article/details/126259781