实现iziModal弹窗移动的功能
濮嘉茂
有下载链接<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iziModa</title>
<link rel="stylesheet" type="text/css" href="css/iziModal.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/iziModal.min.js" type="text/javascript"></script>
<script src="js/dragcommon.js" type="text/javascript"></script>
</head>
<body>
<div id="modal-msg" class="iziModal" usemap="#planetmap" alt="Planets">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore voluptate aut dignissimos iusto, perferendis corrupti deserunt. Cum, distinctio atque iusto, voluptatum illum fugiat asperiores dignissimos harum incidunt nam! Ad, dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo error aperiam voluptates enim quo unde officiis vero aliquid iste omnis odit nihil eaque quasi deserunt nesciunt, architecto, illo tenetur dolores!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, modi voluptate voluptates pariatur quos distinctio perspiciatis, vitae nihil consectetur, ipsam a magnam omnis sequi necessitatibus. Quisquam nesciunt ullam iste optio!</p>
</div>
<script type="text/javascript">
$(function() {
$("#modal-msg").iziModal({
title: "Welcome to the iziModal",
subtitle: "Simple, complete and lightweight modal plugin with jquery.",
iconClass: 'icon-announcement',
width: 700,
padding: 20
});
$('#modal-msg').iziModal('open');
drag();
});
</script>
</body>
</html>//执行modal-data弹窗拖拽的方法
function drag() {
$(".iziModal-header").attr("id", "modalmsg");
$(document).on("closing","#modal-msg",function(e){
//删除打开的弹窗
$(".iziModal").remove();
});
//加载完modal执行删除遮罩层
$(".fadeIn").remove();
// 清除固定的位置
$("#modal-msg").css("margin-left", "");
$("#modal-msg").css("margin-top", "");
// 设定位置
$(".iziModal").css("left", "35%");
$(".iziModal").css("top", "39%");
// 窗体的位置是通过调整iziModal的css样式实现的
$(".iziModal-header").css("cursor", "move");
// 鼠标拖拽的方法
var posX;
var posY;
coordinate=document.getElementById("modalmsg");
coordinates = document.getElementById("modal-msg");
coordinate.onmousedown = function(e) {
posX = event.x - coordinates.offsetLeft; // 获得横坐标x
posY = event.y - coordinates.offsetTop; // 获得纵坐标y
document.onmousemove = mousemove; // 调用函数，只要一直按着按钮就能一直调用
};
document.onmouseup = function() {
document.onmousemove = null; // 鼠标举起，停止
};
function mousemove(ev) {
if (ev == null)
ev = window.event; // IE
var a = coordinates.style.left = (ev.clientX - posX) + "px";
var b = coordinates.style.top = (ev.clientY - posY) + "px";
}
//主动加载触摸方法
handtouch();
}
//触摸操作
function handtouch() {
// 获取节点
//监听标题的id点击事件，移动其他id
var blocks = document.getElementById("modalmsg");
var block = document.getElementById("modal-msg");
var oW, oH;
// 绑定touchstart事件
blocks.addEventListener("touchstart", function(e) {
var touches = e.touches[0];
oW = touches.clientX - block.offsetLeft;
oH = touches.clientY - block.offsetTop;
//阻止页面的滑动默认事件
document.addEventListener("touchmove", defaultEvent, false);
}, false)
blocks.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var oLeft = touches.clientX - oW;
var oTop = touches.clientY - oH;
if(oLeft < 0) {
oLeft = 0;
} else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {
oLeft = (document.documentElement.clientWidth - block.offsetWidth);
}
block.style.left = oLeft + "px";
block.style.top = oTop + "px";
}, false);
blocks.addEventListener("touchend", function() {
document.removeEventListener("touchmove", defaultEvent, false);
}, false);
function defaultEvent(e) {
}
}
类似资料：