最近做的一个微信公众号需求,需要长按呼出有删除按钮的浮层,然后将图片拖到删除的浮层上即可删除。功能完成后在这里做个笔记,同时也可以给需要实现该功能的猿友做个参考。
代码:
<!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});