首页 > 代码库 > 简单实用的可拖曳窗口

简单实用的可拖曳窗口

2024-11-17 02:50:02   203人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>简单实用的可拖曳窗口</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><script type="text/javascript" src="http://localhost/data/resource/js/jquery.js"></script><script type="text/javascript">$(function(){//样式$(".drag").css({"position":"absolute"})/*+++++ 拖曳效果 ++++++*原理：标记拖曳状态dragging，坐标位置iX、iY* mousedown:fn(){dragging = true：记录起始坐标位置，设置鼠标捕获}* mouseover:fn(){判断如果dragging = true，则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}* mouseup:fn(){dragging = false：释放鼠标捕获，防止冒泡}*/var dragging = false;var iX, iY;var a;$(".drag").mousedown(function(e) {dragging = true;iX = e.clientX - this.offsetLeft;iY = e.clientY - this.offsetTop;a=$(this);this.setCapture && this.setCapture();return false;});document.onmousemove = function(e) {if (dragging) {var e = e || window.event;var oX = e.clientX - iX;var oY = e.clientY - iY;a.css({"left":oX + "px", "top":oY + "px"});return false;}};$(document).mouseup(function(e) {dragging = false;a[0].releaseCapture();e.cancelBubble = true;})})</script></head><body><div class="drag" style="top: 500px;"><img src="http://h.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f74f6ac2ae710e0cf3d7cad601.jpg" id="a" name="a" class="a" ></div><div class="drag" style="top: 200px;"><img src="http://h.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f74f6ac2ae710e0cf3d7cad601.jpg" id="a" name="a" class="a" ></div></body></html>

　　

简单实用的可拖曳窗口


联系
我们