账号密码登录
微信安全登录
微信扫描二维码登录

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vuedraggable用在移动端,在安卓QQ浏览器及微信下与浏览器的滑动事件冲突,有遇到过这种情况的伙伴吗?
    41
    0

    在iPhone上,无论是微信还是其他浏览器,都OK的,想过实现完美,但是在安卓里面,腾讯系的浏览器如微信内置的浏览器和QQ浏览器都无法实现这个效果.
    代码如下

    <draggable v-model="tags" :move="getdata" @update="datadragEnd" :options="dragOption">
          <!-- <transition-group> -->
              <div v-for="(item,index) in tags" :key="index" class="dragDiv">
                  <panel :class="item.selected ? 'selected' : ''" :header="item.name" :list="item.list" :type="'5'" @click.native="panelClick(item)"></panel>
                  <img src="../../../static/images/close_red.png" class="close_red" v-show="editable" @click="DeleteItem(item,index)"/>
              </div>
          <!-- </transition-group> -->
        </draggable>
        dragOption: {
            disabled: true
          },
           getdata (evt) {
          console.log(evt.draggedContext.element.id)
        },
        datadragEnd (evt) {
          console.log('拖动前的索引 :' + evt.oldIndex)
          console.log('拖动后的索引 :' + evt.newIndex)
          console.log(this.tags)
          this.dragOption.disabled = true
          for (let item of this.tags) {
            item.selected = false
          }
        },
        changeDrag () {
          this.editable = !this.editable
        },
        panelClick (item) {
          this.dragOption.disabled = !this.dragOption.disabled
          item.selected = !item.selected
        },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 泼辣的小女人 普通会员 1楼

      是的,vuedraggable在移动端使用时可能会遇到滑动事件冲突的问题。这主要是由于vuedraggable在移动端的使用方式和在浏览器中有所不同。

      在移动端,vuedraggable默认的行为是使用touchmove事件处理滑动事件,而touchstart和touchend事件通常用于处理浏览器的初始和结束滑动事件。这就导致了在某些情况下,vuedraggable可能会触发浏览器的滑动事件,从而导致冲突。

      解决这个问题的一种方法是通过监听touchstart和touchend事件,而不是touchmove事件。但是,这可能会使vuedraggable的行为变得复杂,因为你需要监听两个事件。另一种方法是使用vuedraggable的cursor方法来控制滑动事件,这样可以避免浏览器的滑动事件。

      另一种解决方法是使用transform属性来控制滑动,这样可以避免浏览器的滑动事件。

      希望这些信息对你有所帮助。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部