鼠标拖动div(pc/移动)/touch事件/mouse事件

2.这周接了一个分享到QQ后者微信的分享页任务,里面有一个拖动div左右滑动的功能,由于第一次做,弄了五六个小时,终于出来了

1.HTML

<div id="videoShow" class="video_show">
    <div class="video_item">
        <a href="javascript:void(0)" class="align_center"><img alt="图片" src="${basePath}/images/luffy.jpg"></a>
        <span>One Piece Gold</span>
    </div>
</div>

2.css

父div样式

    display: flex;
    transition-duration: 0ms;
    transform: translateX(0px);

子div

    flex-shrink: 0;

transition-duration: 0ms; 规定完成过渡效果需要花费的时间
transform: translate3d(0px, 0px, 0px); 该(transform)属性允许我们对元素进行旋转,缩放,移动,倾斜
transform: translateX(0px); 该(transform)属性允许我们对元素进行左右移动

3.判断设备类型,网上有很多

主要是区分是移动设备还是pc设备,移动设备的事件
移动端:(touchstart,touchmove,touchend)，
pc端:(mousedown,mousemove,mouseup,mouseleave)

3.贴上代码:

//获取设备宽度
var deviceWidth = document.body.scrollWidth;
//body的实际宽度(最外层div的宽度)
var videoShowWidth = deviceWidth;

//html并没有占满整个屏幕,最大宽度为750px
if(deviceWidth>750){
        videoShowWidth = 750;
}

var positionX = 0;
var positionY = 0;
//当前transform属性的值
var transgormX = 0;
var videoShow = document.getElementById("videoShow");   //videoShow是拖动div
var videoShowPositionX1 = $(videoShow).offset().left;       //该div的左上角横坐标
//确定右上角坐标
if(deviceWidth>750){
    videoShowPositionX2 = (deviceWidth + 750)/2;
}else{
    videoShowPositionX2 = videoShowPositionX1 + $(videoShow).width();      
}
$(videoShow).attr("style","transition-duration: 0ms;transform: translateX(0px);");    //添加移动div需要的css
// 电脑与pc事件不同
//对div进行处理width:num,根据实际宽度确定div的宽度
$(videoShow).css("width",videoShowWidth);
$(".video_item").css("width",videoShowWidth/3);
if(IsPC()){
//电脑移动事件
    //鼠标按下事件
    $(videoShow).bind('mousedown',function(e){
        // 鼠标按下捕获此时位置
        positionX = e.pageX;
        posiitonY = e.pageY;
        var transformStr = $(this).attr("style");
        transformStr = transformStr.substring(transformStr.lastIndexOf("translateX(")+11);
        transformX = parseInt(transformStr.substring(0,transformStr.lastIndexOf("p")));
        //确定本次拖动的div宽度值
        var widthStr = videoShow.style.width;
        thisWidth = parseInt(widthStr.substring(0,widthStr.lastIndexOf("p")));
        //鼠标按下,绑定鼠标移动事件
        $(this).bind('mousemove',function(e){
            e.preventDefault();
            // transformX+e.pageX-positionX表示当前移动的距离
            $(this).css("transition-duration","0ms");
            $(this).css("transform","translateX("+(transformX+e.pageX-positionX)+"px)");
            $(videoShow).css("width",thisWidth+positionX-e.pageX);
        });
    });
    //mouseup,鼠标松开事件(移动出元素位置,此事件捕获不到),mouseleave,移动出钙元素时的事件
    //(注:若鼠标在元素之外仍需要拖动效果,那么可以为document对象添加mouse事件)
    $(videoShow).bind('mouseup mouseleave',function(e){
        $(this).unbind('mousemove');
        //该div的子标签
        var videoItems = $(".video_item");
        //第一个标签若大于父div左上角横坐标时
        var videoItem1 = videoItems[0];
        if($(videoItem1).offset().left>videoShowPositionX1){
            videoShow.style.transform = 'translateX(0px)';
            $(videoShow).css("width",videoShowWidth);
        }
        // 最后一个标签的位置,父元素右上角坐标值
        var videoItem2 = videoItems[videoItems.length-1];
        var videoItemPositionX = $(videoItem2).offset().left+$(videoItem2).width();
        if(videoItemPositionX<videoShowPositionX2){
            //此时展示最后三个元素,宽度为最大宽度
            videoShow.style.transform = 'translateX('+(0-(videoShowWidth/3)*(videoItems.length-3))+'px)';
            $(videoShow).css("width",videoShowWidth/3*videoItems.length);
        }
    });
}else{
    //客户端拖动事件
    //获取
    videoShow.addEventListener('touchstart',function(event){
        event.preventDefault();
        if(event.targetTouches.length == 1){
            var touch = event.targetTouches[0];
            positionX = touch.pageX;
            //确定本次拖动transform的初始值
            var transformStr = videoShow.style.transform;
            transformStr = transformStr.substring(11);
            var index = transformStr.lastIndexOf("p");
            transformStr = transformStr.substring(0, index);
            transformX = parseInt(transformStr);
            //确定本次拖动的div宽度值
            var widthStr = videoShow.style.width;
            thisWidth = parseInt(widthStr.substring(0,widthStr.lastIndexOf("p")));
        }
    }, false);
    videoShow.addEventListener('touchmove', function(event) {
        //阻止其他事件
        event.preventDefault();
        //获取当前坐标
        if(event.targetTouches.length == 1){
            var touch = event.targetTouches[0];
            videoShow.style.transform = 'translateX('+(transformX+touch.pageX-positionX)+'px)';
            $(videoShow).css("width",thisWidth+positionX-touch.pageX);
        }
    }, false);
    videoShow.addEventListener('touchend', function(event) {
        //判断div是否越界
        // 第一个标签位置不能大于指定值(父元素的左上角横坐标值),
        var videoItems = $(".video_item");
        var videoItem1 = videoItems[0];
        if($(videoItem1).offset().left>videoShowPositionX1){
            videoShow.style.transform = 'translateX('+(videoShowPositionX1)+'px)';
            //此时恢复初始状态
            $(videoShow).css("width",videoShowWidth);
        }
        // 最后一个标签的位置,父元素右上角坐标值
        var videoItem2 = videoItems[videoItems.length-1];
        var videoItemPositionX = $(videoItem2).offset().left+$(videoItem2).width();
        if(videoItemPositionX<videoShowPositionX2){
            //此时展示最后三个元素,宽度为最大宽度
            videoShow.style.transform = 'translateX('+(0-(videoShowWidth/3)*(videoItems.length-3))+'px)';
            $(videoShow).css("width",videoShowWidth/3*videoItems.length);
        }
    }, false);
}

最后在魅族,ipone,ipad,pc端测试成功
注,pc端由于该div子元素包含img和a标签mousemove事件,会被抑制。在IE和FF之外的浏览器中 e.preventDefault(); 会抑制其他事件不起作用,所以可以达到拖动效果。
但是在IE和FF浏览器中此段代码无效,所以在这两个浏览器中没有鼠标拖动效果,这两个浏览器需要其他的方式抑制其他事件,时间原因没有尝试)

于2017年1月13日对博客做了补充修改