可拖动的弹窗
pc端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可拖动的弹窗</title>
<style type="text/css">
a{text-decoration: none; color: #eee; display: block;}
.button{width: 200px; height: 50px; border-radius: 20px; text-align:center;line-height: 50px;}
.callout_button{background:#FF5B5B;margin:0 auto; }
.callout_button:hover{background: red;}
.close_button{background:#363636;margin:0 auto;}
.close_button:hover{background: black;}
.mask{width: 100%;height: 100%;background:#000;position: absolute;top: 0px;left:0px;opacity: 0.4;z-index: 8000; display: none;-moz-user-select: none; -webkit-user-select: none;}
.dialog{width: 380px;background:#fff; position: absolute;z-index: 9000;padding-bottom: 10px; display: none;-moz-user-select: none; -webkit-user-select: none;}
.dialog_head{width: 100%;height:50px;background:#4B4B4B;text-align: center;line-height: 50px;color: #eee; cursor: move;}
.dialog_content{width: 100%;height:300px;}
</style>
</head>
<body>
<div id="callout" class="button callout_button"><a href="#">弹出对话框</a></div>
<div id="mask" class="mask"></div>
<div class="dialog" id="dialog">
<div class="dialog_head" id="move_part">可拖拽部分</div>
<div class="dialog_content"></div>
<div class="button close_button" id="close"><a href="#">点我关闭对话框</a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $dialog = $("#dialog");
var $mask = $("#mask");
//自动居中对话框
function autoCenter(el){
var bodyW = $(window).width();
var bodyH = $(window).height();
var elW = el.width();
var elH = el.height();
$dialog.css({"left":(bodyW-elW)/2 + 'px',"top":(bodyH-elH)/2 + 'px'});
};
//点击弹出对话框
$("#callout").click(function(){
$dialog.css("display","block");
$mask.css("display","block");
autoCenter($dialog);
});
//禁止选中对话框内容
if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
g('dialog').attachEvent('onselectstart', function() {
return false;
});
}
//声明需要用到的变量
var mx = 0,my = 0; //鼠标x、y轴坐标（相对于left，top）
var dx = 0,dy = 0; //对话框坐标（同上）
var isDraging = false; //不可拖动
//鼠标按下
$("#move_part").mousedown(function(e){
e = e || window.event;
mx = e.pageX; //点击时鼠标X坐标
my = e.pageY; //点击时鼠标Y坐标
dx = $dialog.offset().left;
dy = $dialog.offset().top;
isDraging = true; //标记对话框可拖动
});
//鼠标移动更新窗口位置
$(document).mousemove(function(e){
var e = e || window.event;
var x = e.pageX; //移动时鼠标X坐标
var y = e.pageY; //移动时鼠标Y坐标
if(isDraging){ //判断对话框能否拖动
var moveX = dx + x - mx; //移动后对话框新的left值
var moveY = dy + y - my; //移动后对话框新的top值
//设置拖动范围
var pageW = $(window).width();
var pageH = $(window).height();
var dialogW = $dialog.width();
var dialogH = $dialog.height();
var maxX = pageW - dialogW; //X轴可拖动最大值
var maxY = pageH - dialogH; //Y轴可拖动最大值
moveX = Math.min(Math.max(0,moveX),maxX); //X轴可拖动范围
moveY = Math.min(Math.max(0,moveY),maxY); //Y轴可拖动范围
//重新设置对话框的left、top
$dialog.css({"left":moveX + 'px',"top":moveY + 'px'});
};
});
//鼠标离开
$("#move_part").mouseup(function(){
isDraging = false;
});
//点击关闭对话框
$("#close").click(function(){
$dialog.css("display","none");
$mask.css("display","none");
});
//窗口大小改变时，对话框始终居中
window.onresize = function(){
autoCenter($dialog);
};
});
</script>
</body>
</html> 移动端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<title>div块跟随手指拖动</title>
</head>
<body>
<div id="id"></div>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: #ccc;
position: absolute;
left: 0px;
top: 100px;
}
</style>
<script type="text/javascript">
var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start;
document.getElementById("id").addEventListener("touchstart",function(e)
{
_x_start=e.touches[0].pageX;
_y_start=e.touches[0].pageY;
// console.log("start",_x_start)
left_start=$("#id").css("left");
top_start=$("#id").css("top");
})
document.getElementById("id").addEventListener("touchmove",function(e)
{
_x_move=e.touches[0].pageX;
_y_move=e.touches[0].pageY;
// console.log("move",_x_move)
$("#id").css("left",parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px");
$("#id").css("top",parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px");
console.log(parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start));
})
document.getElementById("id").addEventListener("touchend",function(e)
{
var _x_end=e.changedTouches[0].pageX;
var _y_end=e.changedTouches[0].pageY;
// console.log("end",_x_end)
})
//阻止浏览器下拉事件
$('body').on('touchmove', function (event) {event.preventDefault();});
// or
// document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
</script>
</body>
</html>
