zoukankan
html css js c++ java
层拖动Drag Div
代码如下:
<!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> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <script type="text/javascript"> <!-- function $(id) { return document.getElementById(id); } var g_CatchDiv = false; var g_obj; var g_objName; function CatchMoveDiv(obj, name) { window.setTimeout('g_CatchDiv = true', 200); g_obj = obj; g_objName = name; var oMove = $('divMove'); var MoveObj = obj; oMove.innerHTML = MoveObj.outerHTML; oMove.style.cursor = ''; oMove.style.filter = 'alpha(opacity=50)'; // document.body.style.filter = 'alpha(opacity = 30)'; // oMove.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)'; oMove.style.left = event.x - 35; oMove.style.top = event.y + 10; oMove.setCapture(); document.onmouseup = function() {ReleaseDiv();}; document.onmousemove = function() {MoveDiv();}; } function ReleaseDiv() { window.setTimeout('g_CatchDiv = false', 200) var oMove = $('divMove'); oMove.style.display = 'none'; oMove.releaseCapture(); document.onmousemove = null; } function MoveDiv() { if (g_CatchDiv) { var oMove = $('divMove'); oMove.style.left = event.x - 35; oMove.style.top = event.y; oMove.style.display = ''; } } //--> </script> <div id="divA" style="cursor:pointer; border:solid 1px" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.innerText);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.innerText + '〗下吗?')) {}}">AAA</div> <div> </div> <div id="divB" style="cursor:pointer; border:solid 1px" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.innerText);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.innerText + '〗下吗?')) {}}">BBB</div> <div id="divMove" style="position:absolute;display:none; z-index:0;"></div> <input id="btnSubmit" type="submit" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.value);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.value + '〗下吗?')) {}}" value="Submit" /> <input type="reset" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.value);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.value + '〗下吗?')) {}}" value="Reset" /> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
青苹果Web应用商店
https://webapp.taobao.com/
PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发,详细需求联系
QQ:8511978
查看全文
相关阅读:
利用python进行数据分析之数据聚合和分组运算
利用python进行数据分析之绘图和可视化
利用python进行数据分析之数据规整化
利用python进行数据分析之pandas库的应用(二)
利用python进行数据分析之pandas库的应用(一)
利用python进行数据分析之数据加载存储与文件格式
git 本地无版本仓库推送到远程新仓库命令
Docker 部署Dotnet Core MVC项目
css 单行图片文字水平垂直居中汇总
IL命令初学者要知道的事
原文地址:https://www.cnblogs.com/Dicky/p/DragDiv.html
最新文章
sea.js学习笔记
XPivot 用户手册及版本更新公示
BI领军者之一Tableau试用浅谈
使用SQL脚本删除冗余的视图和表
开启MSSQLServer跨服务器查询功能
用SQL脚本移除视图中存在的机器名
VMware vCenter Converter 使用,Error code: 2147549183 (0x8000FFFF) 解决方案
服务器安装操作系统大容量磁盘系统规划
Dell 2950服务器CPU-E1422错误解决方法
共享器 TS ERROR WINDOWS-FAILED 错误解决方法
热门文章
给买车的来点干货——汽车品牌分析
如何实现Web视频聊天?
博客搬家了
IOS 之 PJSIP 笔记(二) iPJSUA 的简单使用
IOS 之 PJSIP 笔记(一) 编译多平台支持的静态库
【EF 译文系列】重试执行策略的局限性(EF 版本至少为 6)
【EF 译文系列】韧性连接、重试(EF 版本至少为 6)
【EF 译文系列】模型和数据库连接
MEF核心笔记(6)让 MEF 拥抱 AOP
test
Copyright © 2011-2022 走看看