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

r囧r小猫 2023-07-17 07:26 5阅读 0赞

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

代码：

<!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 事件][touchmove]来解决

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

[touchmove]: http://www.caihaibo.cn/devpro/webfront/3938.html