实现iziModal弹窗移动的功能

来源：互联网发布：淘宝排名突然下降编辑：程序博客网时间：2024/06/02 19:42

有下载链接

<!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; // 获得横坐标xposY = event.y - coordinates.offsetTop; // 获得纵坐标ydocument.onmousemove = mousemove; // 调用函数，只要一直按着按钮就能一直调用};document.onmouseup = function() {document.onmousemove = null; // 鼠标举起，停止};function mousemove(ev) {if (ev == null)ev = window.event; // IEvar a = coordinates.style.left = (ev.clientX - posX) + "px";var b = coordinates.style.top = (ev.clientY - posY) + "px";}//主动加载触摸方法handtouch();}//触摸操作function handtouch() {// 获取节点//监听标题的id点击事件，移动其他idvar 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) {}}

阅读全文

0 0