tntxia
- 浏览: 1507222 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (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 871Ajax 全名为Asynchronous Javas ... -
Webpack入门配置
2019-01-05 15:33 3193Webpack是一个强大前端集成工具，它在Nodejs的基础 ... -
解决Jetty做Web容器时，修改JS或HTML出错的问题
2018-07-03 18:28 1074解决的方法 1. 进入jetty的安装目录 ... -
用JQuery做的一个分页效果
2018-05-28 02:29 2328这个效果主要使用jquery来实现， 每次显示 ... -
Vue自已写的日历插件
2018-05-07 12:36 6415自已写的日历插件，还在优化中，后续会陆续更新。 ... -
无刷新上传文件的方法
2018-04-15 00:05 827这里使用jquery.form.js的方法 1. ... -
zrender学习点滴
2018-01-21 20:37 1809Zrender是一个二维绘图引擎，它提供了Canvas，S ... -
原创程序- Web版数据库管理
2017-11-15 00:39 1177这是我自已写的Web版的数据库管理工具，主要是依赖于JDBC ... -
Vue学习点滴
2017-09-23 22:11 7361. 循环 v-for="(item, ... -
Eclipse创建Web项目
2017-07-29 10:53 7751. 打开创建Web项目的对话框 2 ... -
HTML5 新增功能收集
2017-04-29 03:18 658HTML 5是HTML发展以来最大的一次变革，相比其 ... -
Bootstrap学习记录点滴
2017-04-28 00:56 9121. 学习Bootstrap必进的学习网站 ... -
关于地图显示的一些知识
2017-02-18 23:34 9221. 墨卡托（Mercator）投影 墨卡 ... -
CSS知识记录点滴
2017-02-05 11:06 5951. 元素无法选择 -webkit-u ... -
用JS制作3D效果布局
2016-12-04 22:18 25这是用JS做的一个3D布局效果的程序， 目前还是研究 ... -
tntxiawebmvc 做国家管理的系统
2016-11-19 18:21 8641. 首先我们先增加一个Web项目 如图：我们在左 ... -
jtopo学习记录
2016-11-13 13:34 15291. 通过JSON的格式来创建结点： $(funct ... -
Html 5 Canvas 学习记录
2016-11-13 10:28 5841. stroke beginPath endPat ... -
jquery杂记
2016-08-11 19:11 6911. $ 的作用 $ 在jquery里面有两 ... -
自已写的jquery ui框架
2016-03-08 23:53 1545这个是自已写的一个jquery ui的插件，目的是 ...
相关推荐
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
拖拽 拖动div 可拖拽div框 div+css html静态资源
在ASP.NET中实现一个可拖动的div是提高用户界面交互性和用户体验的有效方式，尤其当需要替代传统的alert对话框时，可拖动div能提供更加灵活和友好的用户体验。 首先，要实现可拖动的div，我们需要理解HTML和CSS的...
在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...
在网页开发中，创建一个可拖动的div弹窗是一项常见的需求，特别是在构建用户界面时。这个场景描述的“可拖动div弹窗esc关闭 锁屏”涉及到多个技术点，我们将逐一详细解释。 首先，"可拖动div"是指在HTML页面中，...
其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下拖动div进行排序的功能，同时结合描述中的内容，我们会看到一个实例，该实例不仅支持div...
在标题“拖动多个div”中，我们关注的是如何使一个或多个 `div` 元素变得可拖动，即用户可以通过鼠标进行交互，自由地在页面上移动这些元素。这种功能在构建各种交互式界面时非常有用，例如，可以用于创建可自定义...
"可拖动div层"是这样的一个功能，它允许开发者创建一个浮动且可操作的div元素，通常用于弹出式窗口、对话框或者提示信息。这个功能在jQuery库的支持下，可以实现跨浏览器的兼容性，包括Internet Explorer（IE）、...
1. **定义可拖动元素**：首先，我们需要设置一个div元素为可拖动。这可以通过在HTML中添加`draggable="true"`属性来实现。例如： ```html <div id="draggableDiv" draggable="true">拖动我</div> ``` 2. **监听...
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...
可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能通常采用原生 JavaScript 实现。 #### 实现步骤 1. **绑定事件监听器**：为 Div 绑定 `mousedown` 事件，当用户按下鼠标左键时触发。 2. **获取...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
标题中的“基于bootstrap和jquery的可拖拽移动div，可预览的页面生成器”指的是一个Web开发工具，它利用Bootstrap框架和jQuery库构建，允许用户通过拖拽和放置的方式设计网页布局，并实时预览编辑效果。Bootstrap是...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...
在JavaScript中，创建一个可拖动的div元素是一项常见的任务，尤其在开发交互式Web应用时。这个"js弹出可拖动div"的主题主要涵盖了HTML、CSS和JavaScript的结合，用于实现用户友好的界面元素。下面我们将深入探讨这个...
"js可拖拽停靠吸附DIV"这个主题涉及的技术点主要包括：JavaScript基础、DOM操作、事件处理、CSS定位以及可能的自定义动画效果。 1. **JavaScript基础**： - **变量与数据类型**：在实现拖拽功能时，我们需要声明并...
在这个例子中，我们设置了一个id为"draggable"的div，并为其设置了可拖动属性`draggable="true"`，同时通过CSS赋予它一定的样式，使其易于识别。 接下来，我们需要编写JavaScript代码（这里以drag.js为例）来处理...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
js拖动 拖拽div大小，内部随意文件操作。完美实现版