账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    请教一个问题：移动设备ipad弹窗拖拽怎样实现?
    • 2019-12-17 00:00
    • 10
    66
    0

    PC端参照网上代码，移动端一直没有实现成功。

    export default {  
  bind (el, binding, vnode) {  
    const dialogHeaderEl = el.querySelector('.el-dialog\_\_header')  
    const dragDom = el.querySelector('.el-dialog')  
    dialogHeaderEl.style.cssText += ';cursor:move;'  
    dragDom.style.cssText += ';top:0px;'  
  
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);  
    const getStyle = (function () {  
      if (window.document.currentStyle) {  
        return (dom, attr) => dom.currentStyle\[attr\]  
      } else {  
        return (dom, attr) => getComputedStyle(dom, false)\[attr\]  
      }  
    })()  
  
    dialogHeaderEl.ontouchstart = e => {  
      // 鼠标按下，计算当前元素距离可视区的距离  
      const disX = e.touches\[0\].clientX - dialogHeaderEl.offsetLeft;  
      const disY = e.touches\[0\].clientY - dialogHeaderEl.offsetTop;  
  
      const dragDomWidth = dragDom.offsetWidth  
      const dragDomHeight = dragDom.offsetHeight  
  
      const screenWidth = document.body.clientWidth  
      const screenHeight = document.body.clientHeight  
  
      //不能超出可视区  
      const minDragDomLeft = dragDom.offsetLeft  
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth  
  
      const minDragDomTop = dragDom.offsetTop  
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight  
  
      // 获取到的值带px 正则匹配替换  
      let styL = getStyle(dragDom, 'left')  
      let styT = getStyle(dragDom, 'top')  
  
      if (styL.includes('%')) {  
        styL = +document.body.clientWidth \* (+styL.replace(/\\%/g, '') / 100)  
        styT = +document.body.clientHeight \* (+styT.replace(/\\%/g, '') / 100)  
      } else {  
        styL = +styL.replace(/\\px/g, '')  
        styT = +styT.replace(/\\px/g, '')  
      }  
  
      document.ontouchmove = e => {  
        // 通过事件委托，计算移动的距离  
        let left = e.touches\[0\].clientX - disX  
        let top = e.touches\[0\].clientY - disY  
  
        // 边界处理  
        if (-left > minDragDomLeft) {  
          left = -minDragDomLeft  
        } else if (left > maxDragDomLeft) {  
          left = maxDragDomLeft  
        }  
  
        if (-top > minDragDomTop) {  
          top = -minDragDomTop  
        } else if (top > maxDragDomTop) {  
          top = maxDragDomTop  
        }  
  
        // 移动当前元素  
        dragDom.style.cssText += \`;left:${left + styL}px;top:${top + styT}px;\`  
  
        // emit onDrag event  
        vnode.child.$emit('dragDialog')  
      }  
  
      document.ontouchend = function (e) {  
        document.ontouchmove = null  
        document.ontouchend = null  
      }  
    }  
  }  
}
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 一句忘記　談何容易 普通会员 1楼

      在移动设备上实现iPad弹窗拖拽需要使用JavaScript和HTML5的拖放API。以下是一个简单的实现步骤：

      1. 在HTML文件中创建一个元素，例如一个div或一个span，作为弹窗的容器。

      ```html

      Drag me

      ```

      1. 在JavaScript文件中，获取拖放容器的元素，然后创建一个div作为拖放的容器。

      javascript var draggableElement = document.getElementById('draggable'); var draggableDiv = document.createElement('div'); draggableDiv.innerHTML = draggableElement.innerHTML; draggableDiv.addEventListener('dragstart', dragStart); draggableDiv.addEventListener('dragover', dragOver); draggableDiv.addEventListener('drop', drop); draggableDiv.addEventListener('dragend', dragEnd);

      1. 在JavaScript中，定义一个dragStart、dragOver和drop事件处理函数。

      ```javascript function dragStart(event) { // 在这里添加拖放元素的行为，例如阻止默认的拖动行为等。 }

      function dragOver(event) { // 在这里添加拖放元素的行为，例如显示一个确认信息等。 }

      function drop(event) { // 在这里添加拖放元素的行为，例如清除拖放元素等。 } ```

      1. 在拖放事件处理函数中，获取拖放元素的当前位置和拖放方向，然后移动元素。

      ```javascript function drag(event) { event.preventDefault(); var position = event.dataTransfer.setData('text', event.target.id); event.target.style.left = position + 'px'; event.target.style.top = position + 'px'; }

      function dragOver(event) { event.preventDefault(); var position = event.dataTransfer.getData('text'); event.target.style.left = position + 'px'; event.target.style.top = position + 'px'; }

      function drop(event) { event.preventDefault(); var dragItem = event.target; // 在这里删除拖放元素 } ```

      1. 在拖放事件处理函数中，将拖放元素的位置和方向存储在一个变量中，以便在拖放结束后可以重新获取。

      ```javascript function drag(event) { event.preventDefault(); var position = event.dataTransfer.getData('text'); var dragItem = event.target; // 将拖放元素的位置和方向存储在一个变量中 }

      function dragOver(event) { event.preventDefault(); var position = event.dataTransfer.getData('text'); var dragItem = event.target; // 将拖放元素的位置和方向存储在一个变量中 }

      function drop(event) { event.preventDefault(); var dragItem = event.target; // 在这里删除拖放元素 } ```

      以上就是一个简单的实现iPad弹窗拖拽的方法。请注意，这只是一个基本的实现，实际使用中可能需要添加更多的功能和优化。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部