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
查看全文
相关阅读:
sql笔记
[ACTF2020 新生赛]Include
[极客大挑战 2019]Http
[极客大挑战 2019]Knife
[极客大挑战 2019]Secret File
[HCTF 2018]admin
[极客大挑战 2019]Havefun
[RoarCTF 2019]Easy Calc
ascll码转化
《逆向工程核心原理》笔记第一章到第十一章
原文地址:https://www.cnblogs.com/Dicky/p/DragDiv.html
最新文章
Web程序的运行原理及流程(二)
Web程序的运行原理及流程(一)
188. Best Time to Buy and Sell Stock IV leetcode解题笔记
123. Best Time to Buy and Sell Stock (三) leetcode解题笔记
122. Best Time to Buy and Sell Stock(二) leetcode解题笔记
121. Best Time to Buy and Sell Stock (一) leetcode解题笔记
110.Balanced Binary Tree Leetcode解题笔记
leetcode解题:Add binary问题
2016/10/28 很久没更了 leetcode解题 3sum问题进阶版4sum
数据探索和预处理
热门文章
【天池】新人赛-快来一起挖掘幸福感!
三、sklearn实现梯度下降
二、sklearn实现线性回归
一、sklearn实现K邻近分类算法
二、tensorflow新手入门之MNIST初级教程
一、Tensorflow新手入门
9、神经网络
8、正则化
7、Logistic回归
[ACTF2020 新生赛]Exec
Copyright © 2011-2022 走看看