tntxia
- 浏览: 1523417 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (595)
- Java咖啡厅 (208)
- IT杂侃 (23)
- 程序员笑话 (7)
- 我的后现代文学 (1)
- WEB编程 (116)
- 软件评测 (8)
- 操作系统 (3)
- 炫目Ruby (2)
- 行业知识 (7)
- 我的动漫情结 (6)
- 其他 (8)
- Window DIY (6)
- 古文学 (3)
- 转载文章 (2)
- IT百科 (7)
- 动态网页Active (1)
- 文档 (1)
- 设计理论 (11)
- .NET 快速开发 (18)
- 英语学习 (6)
- 网站分析 (2)
- 开源软件 (4)
- 数据库 (28)
- 笔记 (4)
- 源代码共享 (8)
- IT人物 (2)
- 软件管理 (10)
- 小说创作 (0)
- 大众软件 (12)
- 网站评论 (3)
- 小虾乱说 (10)
- 游戏 (8)
- 心情 (3)
- 娱乐休闲 (2)
- Delphi编程 (1)
- PHP编程 (4)
- 中间件 (2)
- 移动开发 (2)
- Office应用 (2)
- Photoshop (1)
- Eclipse (5)
- 面试题 (1)
- 手机评测 (0)
- VBScript (1)
- WEB前端-EXT (3)
- 吐槽 (1)
- Java咖啡厅 Ibatis (1)
- javascript Ext (1)
- jquery ui (1)
- require (1)
- WEB编程 Javascript (1)
- jquery (1)
- Swing (1)
- 分布式 (1)
最新评论
-
zhangjihao：
28. 下面哪个Set是排序的？ A. LinkedHas ...
Java面试题（选择题） -
zhangthe9：
ICMP报文被封装在IP包里，也就是说他是由IP协议承载的，从 ...
Java面试题（选择题） -
zhunengfei：
真的假的？
自已写的jquery ui框架 -
white_crucifix：
少年，发烫是所有智能手机的特点，而莫名发烫是所有安卓手机的特点 ...
【吐槽】三星手机的OS是一砣屎 -
suzu88：
试了一下，可以用。如果美化一下控件和窗体更有意思。
一个用XML构建Swing视图的框架
以前在网上看到的最简单的拖动对象的代码，忘记作者叫什么了。原始代码在IE下有些小问题，并且声明了文档类型为xhtml 1.0后，在FF等非IE浏览器下无效，对其进行了改进，现在已经可兼容:IE、Firefox、Opera ...
以下代码只是演示原理，具体应用请结合你自己的实际需求进行修改。
<!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" lang="gb2312">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="editor" content="枫岩,http://www.cnlei.com">
<meta name="keywords" content="代码实例：拖动对象">
<meta name="description" content="最简短的拖动对象代码实例演示">
<style>
.dragAble {position:relative;cursor:move;}
</style>
<script language="javascript">
<!--
// Author: Unkonw
// Modify: 枫岩@CnLei.com
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" />
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" />
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /><br /><br />
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div>
</body>
</html>
以下代码只是演示原理，具体应用请结合你自己的实际需求进行修改。
<!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" lang="gb2312">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="editor" content="枫岩,http://www.cnlei.com">
<meta name="keywords" content="代码实例：拖动对象">
<meta name="description" content="最简短的拖动对象代码实例演示">
<style>
.dragAble {position:relative;cursor:move;}
</style>
<script language="javascript">
<!--
// Author: Unkonw
// Modify: 枫岩@CnLei.com
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" />
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" />
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /><br /><br />
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div>
</body>
</html>
分享到：
发表评论
-
AJAX
2019-06-12 22:41 979Ajax 全名为Asynchronous Javas ... -
Webpack入门配置
2019-01-05 15:33 3222Webpack是一个强大前端集成工具，它在Nodejs的基础 ... -
解决Jetty做Web容器时，修改JS或HTML出错的问题
2018-07-03 18:28 1124解决的方法 1. 进入jetty的安装目录 ... -
用JQuery做的一个分页效果
2018-05-28 02:29 2384这个效果主要使用jquery来实现， 每次显示 ... -
Vue自已写的日历插件
2018-05-07 12:36 6449自已写的日历插件，还在优化中，后续会陆续更新。 ... -
无刷新上传文件的方法
2018-04-15 00:05 872这里使用jquery.form.js的方法 1. ... -
zrender学习点滴
2018-01-21 20:37 1858Zrender是一个二维绘图引擎，它提供了Canvas，S ... -
原创程序- Web版数据库管理
2017-11-15 00:39 1227这是我自已写的Web版的数据库管理工具，主要是依赖于JDBC ... -
Vue学习点滴
2017-09-23 22:11 8001. 循环 v-for="(item, ... -
Eclipse创建Web项目
2017-07-29 10:53 8021. 打开创建Web项目的对话框 2 ... -
HTML5 新增功能收集
2017-04-29 03:18 712HTML 5是HTML发展以来最大的一次变革，相比其 ... -
Bootstrap学习记录点滴
2017-04-28 00:56 9461. 学习Bootstrap必进的学习网站 ... -
关于地图显示的一些知识
2017-02-18 23:34 9761. 墨卡托（Mercator）投影 墨卡 ... -
CSS知识记录点滴
2017-02-05 11:06 6311. 元素无法选择 -webkit-u ... -
用JS制作3D效果布局
2016-12-04 22:18 25这是用JS做的一个3D布局效果的程序， 目前还是研究 ... -
tntxiawebmvc 做国家管理的系统
2016-11-19 18:21 8941. 首先我们先增加一个Web项目 如图：我们在左 ... -
jtopo学习记录
2016-11-13 13:34 16121. 通过JSON的格式来创建结点： $(funct ... -
Html 5 Canvas 学习记录
2016-11-13 10:28 6161. stroke beginPath endPat ... -
jquery杂记
2016-08-11 19:11 7191. $ 的作用 $ 在jquery里面有两 ... -
自已写的jquery ui框架
2016-03-08 23:53 1576这个是自已写的一个jquery ui的插件，目的是 ...
相关推荐
react-dragndrop（ES2015） 简单的库，只需最少的样板代码即可上手。 该库带有2个React组件： 和<DropTarget> 。 为了使这两个组件能够相互通信，必须使用以下代码创建DragDropManager的实例： import {...
draggable: true // 是否可拖动 }); marker.setMap(map); ``` 4. **路径规划**：高德地图API还提供了路线规划功能，例如驾车、步行或骑行路线。 ```javascript AMap.service(['AMap.Driving'], function() { var ...
draggable: true // 设置标记可拖动 }); marker.setMap(map); let infoWindow = new AMap.InfoWindow({ content: '<div>这是一个信息窗口</div>', offset: new AMap.Pixel(0, -30) }); // 绑定点击事件打开...
- **Cache命中率与替换策略**：提高命中率可以显著提升性能，常见的替换策略有LRU（最近最少使用）、FIFO（先进先出）等。 #### 4. 计算机病毒 **知识点解析：** 计算机病毒是一种人为设计的恶意程序，它可以自我...
5、索引+实体数据双缓存模式，只缓存需要的数据，充分合理的利用内存，尽可能在最少消耗下提供最好的性能。 6、标准三层结构开发，结构规范，易于扩展，代码整洁，安全性、稳定性均有质量保证。 7、页面定制，用户...