微信公众号实现图片拖拽删除功能

最新推荐文章于 2021-06-03 19:26:15 发布

酷爱编程的小猿同学

最新推荐文章于 2021-06-03 19:26:15 发布

阅读量1.2k

点赞数

分类专栏： JavaScript JQery 微信公众号文章标签： android ios javascript css jquery

本文链接：https://blog.csdn.net/qq_43037478/article/details/104993671

版权

JQery 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

微信公众号

4 篇文章 1 订阅

订阅专栏

最近做的一个微信公众号需求，需要长按呼出有删除按钮的浮层，然后将图片拖到删除的浮层上即可删除。功能完成后在这里做个笔记，同时也可以给需要实现该功能的猿友做个参考。

代码：

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
        }
        #div1 {
            width:266px;
            height:205px;
            background: red;
            position: absolute;
        }
        #submit2{
            background: red;
            height: 160px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            text-align: center;
            width: 100%;
            line-height: 160px;
            color: #fff;
            opacity: 0.7;
            font-size: 30px;
            display: none;
        }
    </style>
</head>
<script type="text/javascript" src="/weiguanjia/script/jquery-1.7.2.min.js"></script>

<body>
<div id="div1" class="upload"></div>
<div  id="submit2" >托动到此处删除</div>

<script>
    // 获取屏幕的宽高
    var width = $(window).width();
    var height = $(window).height();

    var NowLeft,disX;
    var NowTop,disY;

    $(function(){
        var isdrag=false;
        var oDiv2 = document.getElementsByClassName("upload");
        // 页面初始化给要拖拽的元素绑定监听事件，循环的话是有多个的情况
        for (var i = 0; i < oDiv2.length; i++){
            oDiv2[i].addEventListener('touchstart',thismousedown,false);
            oDiv2[i].addEventListener('touchend',thismouseup,false);
            oDiv2[i].addEventListener('touchmove',thismousemove,false);
        }
    });


    // 删除div的高度
    var divWidth = $("#submit2").height();
    var timeout = null;
    var current;
    // 触摸开始，多点触控，后面的手指同样会触发
    function thismousedown(e){
        current = e.currentTarget;
        clearTimeout(timeout);
        //  这里加定时器0.6秒，触摸时间不到0.6秒就不执行（应用场景：如果是拖拽图片，而这个图片绑定了其他事件，两个事件不冲突）
        timeout = setTimeout(function () {
            // 如果打开了键盘，就关闭
            document.activeElement.blur();
            // 设置图片透明度
            current.style.opacity = 0.7;
            // 显示删除模块
            $('#submit2').show();
            $('#submit2').html("托动到此处删除");
            $('#submit2').animate({
                bottom:'0px'
            },300)
            isdrag = true;
            NowLeft = parseInt(current.style.left+0);
            NowTop = parseInt(current.style.top+0);
            disX = e.touches[0].pageX;
            disY = e.touches[0].pageY;
            return false;
        }, 600);

    }

    // 接触点改变，滑动时
    function thismousemove(e){
        if (isdrag){
            e.currentTarget.style.left = NowLeft + e.touches[0].pageX - disX + 'px';
            e.currentTarget.style.top = NowTop + e.touches[0].pageY - disY + 'px';
            var heightUp = e.changedTouches[0].pageY;
            if(height < heightUp+divWidth){
                $('#submit2').html("松开即可删除");
            }else{
                $('#submit2').html("托动到此处删除");
            }
            return false;
        }
    }

    // 触摸结束，手指离开屏幕时
    function thismouseup(e){
        clearTimeout(timeout);  //长按时间少于1000ms，不会执行传入的方法
        // 手指离开屏幕时的坐标
        var heightUp = e.changedTouches[0].pageY;
        // 1.如果移动到删除按钮上面就删除
        if(height < heightUp+divWidth){
            e.currentTarget.remove();
        }else{
            // 如果div没移动到删除模块， 鼠标松开就把div坐标还原
            e.currentTarget.style.left = 0+"px";
            e.currentTarget.style.top = 0+"px";
            // 把设置的透明度还原
            current.style.opacity = 1;
        }
        $('#submit2').hide();
        $('#submit2').animate({
            bottom:'-50px'
        },300);
        isdrag = false;
    };


</script>
</body>
</html>

到此拖拽删除功能就完成了

扩展功能：当我们拖拽元素有默认行为时，比如a标签，buttom标签，微信长按会弹出菜单会影响我们拖拽删除，我们可以禁止微信浏览器长按弹出菜单

iso安卓亲测可用，原理：让鼠标事件失效（链接、点击等事件）。

div1{
	//元素不能成为鼠标事件的target
	pointer-events:none;
}

网上大多数人是如下2种做法，但是我这里不行

1.css，原理：禁用菜单

cssSelect{ //这里为css选择器
	-webkit-touch-callout:none;/*系统默认菜单被禁用*/
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;/*用户是否能够选中文本*/
}

2.js代码如下，原理：阻止默认事件

window.addEventListener('contextmenu', function(e){
	e.preventDefault();
});

拖拽图片的时候又会发现另一个问题，拖拽图片的同时页面会下拉，我们可以禁用页面的 touchmove 事件来解决

//禁止页面拖动
    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, {passive: false});

酷爱编程的小猿同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信公众号实现图片拖拽删除功能

最近做的一个微信公众号需求，需要长按呼出有删除按钮的浮层，然后将图片拖到删除的浮层上即可删除。功能完成后在这里做个笔记，同时也可以给需要实现该功能的猿友做个参考。代码：<!DOCTYPE HTML><html><head> <style type="text/css"> body { wi...
复制链接

扫一扫

专栏目录