老街一角 2022-01-27 09:35 采纳率: 68.8%
浏览 91

这个改成vue按住拖动指令要怎么修改呢


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:400px;
            overflow: auto;
            white-space: nowrap;
            background: #eee;
            border:5px solid #aaa;
        }
        .box>span{
            display: inline-block;
            height:100px;
        }
         /* H5的时候，隐藏滚动条 */
        /* ::-webkit-scrollbar {
            display: none;  
            width: 0 !important;  
            height: 0 !important;  
            -webkit-appearance: none;  
            background: transparent;  
        } */
        /*禁止复制*/
        .no_copy{
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
 
    </style>
</head>
<body>
    <h1>按住拖动时，移出元素依然可以再拖动</h1>
    <div class="box no_copy">
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
    </div>
</body>
</html>
<!-- <script src="../jquery-3.2.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    /**
 * 拖动内容，滚动条滚动，横向
 * @param {string} container 需要拖动的面板
 */
function dragMoveX(container) {
    console.log(container)
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on("mousedown", container, function (event) {
        // console.log('mousedown')
        flag = true;
        downX = event.clientX;
        console.log($(this))
        scrollLeft = $(this).scrollLeft();
        console.log(scrollLeft)
    });
    //鼠标移动
    $(document).on("mousemove", function (event) {
        // console.log('mousemove',flag,event.clientX)
        if (flag) {
            var moveX = event.clientX;
            var scrollX = moveX - downX;
            // console.log("moveX" + moveX);
            // console.log("scrollX" + scrollX);
            if (scrollX < 0 && scrollLeft > 0) {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
            else {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
        }
        // console.log(moveX,scrollX)

    });
    //鼠标释放
    $(document).on("mouseup", function () {
        // console.log('mouseup')
        flag = false;
    });
    /**
     * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
     * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
     * */
    //鼠标移出元素
    $(container).on("mouseleave", function (event) {
        // console.log('mouseleave',event.pageX,document.body.offsetWidth)
        // flag = false;
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
            // console.log('在元素上移出')
            flag = false;
        }         
    });
}
 
dragMoveX(".box");
</script>
  • 写回答

2条回答 默认 最新

  • 前端互助会 2022-01-27 09:40
    关注

    下载vue-seamless-scroll.min.js 像下文中使用

    
<vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
                                <ul class="item">
                                    <li v-for="(item,index) in listData" style="font-size:0.16rem;">
                                        <span style="width:10rem">{{item.code}}</span>
                                        <span style="width:10rem">{{item.code2}}</span>
                                        <span style="width:10rem">{{item.date}}</span>
                                        <span style="width:10rem">{{item.date2}}</span>
                                        <span style="width:10rem">{{item.location}}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
    评论

报告相同问题？

问题事件

  • 修改了问题 1月27日
  • 修改了问题 1月27日
  • 修改了问题 1月27日
  • 修改了问题 1月27日
  • 展开全部

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题