`

JQ 精简的拖动框

阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<script src="jquery-1.10.1.min.js" ></script>
<style>
.page{text-align:left;}
.dragDiv{border:1px solid #ddd; padding:10px; width:300px; margin:0 auto; border-radius:4px; box-shadow:0 1px 2px #fefefe; position: fixed; cursor:move;}
</style>
</head>
<body>
<div class="dragDiv" id="drag">
	<div class="drag-head">点击拖动</div>
	<div class="drag-body">
		一站式网络<br/>
		博客:<a href="http://onestopweb.iteye.com/" target="_blank">http://onestopweb.iteye.com/</a><br/>
		网站:<a href="http://onestopweb.cn/" target="_blank">http://onestopweb.cn/</a>
	</div>
</div>
<script type="text/javascript">
//视频小窗口播放和还原
//全局保存拖动的位置
var _drag = {};
_drag.top = 0; //拖动过的位置距离上边
_drag.left = 0; //拖动过的位置距离左边
_drag.maxLeft; //距离左边最大的距离
_drag.maxTop; //距离上边最大的距离
_drag.dragging = false; //是否拖动标志
//拖动函数
function bindDrag(el){ 
	var winWidth = $(window).width(), winHeight =$(window).height(),objWidth = $(el).outerWidth(), objHeight = $(el).outerHeight();
	_drag.maxLeft = winWidth - objWidth, _drag.maxTop = winHeight - objHeight;
	var els = el.style,x=0,y=0;
	var objTop = $(el).offset().top, objLeft = $(el).offset().left;
	$(el).mousedown(function(e){ 
		_drag.dragging = true;
		_drag.isDragged = true;
		x = e.clientX - el.offsetLeft; 
		y = e.clientY - el.offsetTop; 
		el.setCapture && el.setCapture(); 
		$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
		return false;
	}); 
	function mouseMove(e){ 
		e = e || window.event;
		if(_drag.dragging){
			_drag.top = e.clientY - y; 
			_drag.left = e.clientX - x;
			_drag.top = _drag.top > _drag.maxTop ? _drag.maxTop : _drag.top;
			_drag.left = _drag.left > _drag.maxLeft ? _drag.maxLeft : _drag.left;
			_drag.top = _drag.top < 0 ? 0 : _drag.top;
			_drag.left = _drag.left <0 ? 0 : _drag.left;
			els.top = _drag.top + 'px'; 
			els.left = _drag.left+ 'px';
			return false;
		}
	} 
	function mouseUp(e){ 
		_drag.dragging = false; 
		el.releaseCapture && el.releaseCapture(); 
		e.cancelBubble = true;
		$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp); 
	}
	$(window).resize(function(){
		var winWidth = $(window).width(),
		winHeight = $(window).height(),
		el = $(el),
		elWidth = el.outerWidth(),
		elHeight = el.outerHeight(),
		elLeft = parseFloat(el.css('left')),
		elTop = parseFloat(el.css('top'));
		_drag.maxLeft = winWidth - elWidth;
		_drag.maxTop = winHeight - elHeight;
		_drag.top = _drag.maxTop < elTop ? _drag.maxTop : elTop;
		_drag.left = _drag.maxLeft < elLeft ? _drag.maxLeft : elLeft;
		el.css({
			top:_drag.top,
			left:_drag.left
		})
	})
} 
bindDrag(document.getElementById('drag'));
</script>
</body>
</html>

 

效果图:

 

 

 

 

 

 

 

 

 

  • 大小: 19.5 KB
2
0
分享到:
评论

相关推荐

    数据结构_C语言_链表多项式相加_教学示例_1741871959.zip

    数据结构学习

    Swift-Int封装

    Swift-Int

    数据结构_LaTex_Beamer_教学课件_1741868917.zip

    数据结构学习

    操作系统_夏季编程代码_Rust练习_学习记录与管理_1741865458.zip

    操作系统学习

    操作系统_内核_开发框架_SimpleKernel_学习研究_1741864525.zip

    操作系统学习

    软件开发:全面解析需求规格说明书模板的应用与编写

    内容概要:本文档旨在详细介绍如何编写一份详尽的需求规格说明书,涵盖了从产品描述、需求概述到功能细节等多个方面的规范要求。首先,文档明确编写目的、定义产品相关信息,确保读者能够迅速把握文档主旨并理解所讨论的产品背景。其次,在需求概述环节不仅介绍了产品基本功能和发展愿景,还明确了产品运行所需的硬软件环境及其限制。紧接着,功能需求部分则逐一罗列并深入解读各个具体功能点,同时注明未予实现的功能及背后原因,确保后续工作中有据可依。最后,在附录和其他可选项如数据描述、性能和运行需求等章节中继续补充,完善文档信息链,为技术人员提供坚实依据。 适合人群:面向软件开发团队成员(尤其是产品经理、分析师和技术主管),有助于他们高效梳理业务需求并向团队传达清晰的指导方针。 使用场景及目标:用于启动阶段确立项目的范围边界,辅助项目管理者规划任务分工;协助开发者深入理解和遵循既定规则开展编码作业,确保成品符合用户期望值。 阅读建议:鉴于本手册涉及多个层面的规定细则,请使用者先泛读后精读感兴趣的重点章节,同时积极与实际工作相结合,逐步掌握需求采集、整理直至呈现全过程的技术要点和实战技巧。

    2012-2021年深圳市分区新增常住人口数量(万人)

    新增常住人口数量是指在一定时期内(通常为一年),一个地区在某地居住时间达到6个月以上的人口,包括户籍人口和非户籍常住人口的净增长量。

    安卓开发_可扩展RecyclerView_分组列表_动效展示_1741871985.zip

    数据结构学习

    基于PyTorch的ResNet-18与Triplet Attention融合用于图像分类任务

    内容概要:本文展示了将Triplet Attention机制集成到ResNet-18网络架构中,以提升模型对特征的学习能力。首先介绍了Triplet Attention模块的设计思路及其三个分支——通道注意力(Channel Attention)、高度注意力(Height Attention)和宽度注意力(Width Attention)。接着定义了标准的基本残差块并在此基础上增加了自定义的三重注意力机制,最后完成了完整ResNet-18模型的搭建,其中包括输入数据经过一系列卷积操作后的逐步下采样处理以及顶层的全局均值池化层。通过调整num_class参数还可以改变最终输出类别数来适应不同的业务场景。 适用人群:熟悉深度学习基本概念,特别是对CNN(卷积神经网络)有一定了解的研究人员和技术从业者,或者想要深入了解注意力机制的应用的学生。 使用场景及目标:主要用于解决多模态特征提取问题,能够提高计算机视觉应用如图像识别或物体检测的效果,在医学影像诊断、安防监控等领域有广泛应用前景。 其他说明:提供的完整代码可以作为进一步探索此类网络结构的基础工具,并有助于研究人员进行迁移学习实验和其他相

    程序设计_算法与数据结构_竞赛学习_参考书_1741870359.zip

    数据结构学习

    智慧矿山整体解决方案【42页】.pptx

    智慧矿山整体解决方案【42页】

    基于C语言+MPU6050六轴传感器位移测算+源码(毕业设计&课程设计&项目开发)

    基于C语言+MPU6050六轴传感器位移测算+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于C语言+MPU6050六轴传感器位移测算+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于C语言+MPU6050六轴传感器位移测算+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于C语言+MPU6050六轴传感器位移测算+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于C语言+MPU6050六轴传感器位移测算+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~

    数据结构_算法分析_C语言_答案共享_1741868718.zip

    数据结构学习

    shuhongfan_Data_Structure_Demo_1741871175.zip

    数据结构学习

    40个战略咨询模型(41页 图片版 ).pptx

    40个战略咨询模型(41页 图片版 )

    Linux_Cpp_后台开发_进阶学习资源_1741866133.zip

    操作系统学习

    深度学习图像识别技术中CNN模型的优化及其在医疗、安防与自动驾驶中的应用

    内容概要:本文聚焦于利用深度学习改善卷积神经网络(CNN)在图像识别上的效果。首先介绍了深度学习和图像识别的历史背景和技术现状,并重点讨论了CNN的特点与发展。然后阐述了针对现有CNN模型存在的局限所做出的技术改良,包括架构设计引入残差连接和多尺度特征融合,训练策略上采取自适应学习率调整与数据增强措施,最终构建出了更具竞争力的新模型。该模型经过在CIFAR-10与ImageNet两大数据集上严格的对比测试显示,相较于同类模型有了明显的性能增长,准确率分别提升至95.2%及92.7%,训练耗时减少15%,并且模型体积更轻巧利于部署。文中也提及了图像识别具体案例研究,在医疗图像诊断、安防智能监控系统以及无人驾驶汽车环境感知环节有着重要贡献。 适用人群:对图像识别技术、深度学习感兴趣的科研工作者、高校师生以及从事相关产业技术研发的专业人士。 使用场景及目标:可用于提高各类需要精确快速定位或辨认物体应用场景下系统的运行效能;为涉及计算机视觉业务的企业提供创新性解决方案。 其他说明:文章提到模型仍然存在一些有待解决的问题比如更好的跨域迁移能力和更强的数据安全保护等方面,指明了未来的研发路径,对于

    我的图书馆特色藏书推荐.doc

    我的图书馆特色藏书推荐

    前端分析-2023071100789s122

    前端分析-2023071100789s122

    中国象棋_马步走法_骑士巡游_算法实现与可视化工具_1741873780.zip

    数据结构学习

Global site tag (gtag.js) - Google Analytics