静态拖拽行:
<html>
<head>
<title>行拖动</title>
<script>
window.onload = function() {
//绑定事件
var addEvent = document.addEventListener ? function(el, type, callback) {
el.addEventListener(type, callback, !1);
}
: function(el, type, callback) {
el.attachEvent("on" + type, callback);
}
//判定对样式的支持
var getStyleName = (function() {
var prefixes = [ '', '-ms-', '-moz-', '-webkit-', '-khtml-', '-o-' ];
var reg_cap = /-([a-z])/g;
function getStyleName(css, el) {
el = el || document.documentElement;
var style = el.style, test;
for ( var i = 0, l = prefixes.length; i < l; i++) {
test = (prefixes[i] + css).replace(reg_cap,
function($0, $1) {
return $1.toUpperCase();
});
if (test in style) {
return test;
}
}
return null;
}
return getStyleName;
})();
var userSelect = getStyleName("user-select");
//精确获取样式
var getStyle = document.defaultView ? function(el, style) {
return document.defaultView.getComputedStyle(el, null)
.getPropertyValue(style)
} : function(el, style) {
style = style.replace(/\-(\w)/g, function($, $1) {
return $1.toUpperCase();
});
return el.currentStyle[style];
}
var dragManager = {
y : 0,
dragStart : function(e) {
e = e || event;
var handler = e.target || e.srcElement;
if (handler.nodeName === "TD") {
handler = handler.parentNode;
dragManager.handler = handler;
if (!handler.getAttribute("data-background")) {
handler.setAttribute("data-background", getStyle(
handler, "background-color"))
}
//显示为可移动的状态
handler.style.backgroundColor = "#ccc";
handler.style.cursor = "move";
dragManager.y = e.clientY;
//★★★★★★★★★★★★★★★★★★★★
if (typeof userSelect === "string") {
return document.documentElement.style[userSelect] = "none";
}
document.unselectable = "on";
document.onselectstart = function() {
return false;
}
//★★★★★★★★★★★★★★★★★★★★
}
},
draging : function(e) {//mousemove时拖动行
var handler = dragManager.handler;
if (handler) {
e = e || event;
var y = e.clientY;
var down = y > dragManager.y;//是否向下移动
var tr = document.elementFromPoint(e.clientX, e.clientY);
if (tr && tr.nodeName == "TD") {
tr = tr.parentNode
dragManager.y = y;
if (handler !== tr) {
tr.parentNode.insertBefore(handler,
(down ? tr.nextSibling : tr));
}
}
;
}
},
dragEnd : function() {
var handler = dragManager.handler
if (handler) {
handler.style.backgroundColor = handler
.getAttribute("data-background");
handler.style.cursor = "default";
dragManager.handler = null;
}
//★★★★★★★★★★★★★★★★★★★★
if (typeof userSelect === "string") {
return document.documentElement.style[userSelect] = "text";
}
document.unselectable = "off";
document.onselectstart = null;
//★★★★★★★★★★★★★★★★★★★★
},
main : function(el) {
addEvent(el, "mousedown", dragManager.dragStart);
addEvent(document, "mousemove", dragManager.draging);
addEvent(document, "mouseup", dragManager.dragEnd);
}
}
var el = document.getElementById("table");
dragManager.main(el);
}
</script>
<style>
.table {
width: 60%;
border: 1px solid green;
border-collapse: collapse;
}
.table td {
border: 1px solid green;
height: 20px;
}
</style>
</head>
<body>
<h1>行拖动</h1>
<table id="table" class="table">
<tbody>
<tr>
<td>1</td>
<td>第一行</td>
</tr>
<tr id="2">
<td class="2">2</td>
<td>第二行</td>
</tr>
<tr id="3">
<td class="3">3</td>
<td>第三行</td>
</tr>
<tr id="4">
<td class="4">4</td>
<td>第四行</td>
</tr>
<tr id="5">
<td class="5">5</td>
<td>第五行</td>
</tr>
<tr id="6">
<td class="6">6</td>
<td>第六行</td>
</tr>
</tbody>
</table>
<div class="sortClass" id="toolsort">
<ul>
<li>API</li>
<li>组件</li>
<li>模板</li>
<li>代码</li>
<li>第三方</li>
<li>IT资源</li>
</ul>
</div>
</body>
</html>
分享到：
发表评论
-
manven构建spring+springmvc+mybaitis框架
2016-04-23 22:51 0最近要离职了,闲暇的时候想自己构建个项目，说干就干。 具体 ... -
有个内存溢出的问题请教啊！
2015-08-18 16:58 919public Map<String, Object ... -
六年JAVA兼职
2014-10-10 14:08 355我叫刘洋，JAVA开发做了六年多了，大大小小的项目做过很多 ... -
新手搭车maven
2014-04-29 15:50 59最近工作太繁忙，一直没有时间来充电。 偶然的一个机会 ... -
关于DB2日常使用中遇到的问题
2013-07-30 10:07 8111 经常需要用到在不drop表的前提下去修改表字段的数据 ... -
我还年轻,我渴望上路.
2012-12-02 09:19 72不知不觉快工作两年多了,最近玩的也比较多,是时候放下玩的心了, ... -
ijetty的应用开发
2012-11-30 16:29 3154最近使用ijetty开发了一 ... -
求助一个关于公式编辑器插件的问题。
2012-08-09 11:27 74附件是一个网页可用的公式编辑器插件。 总体上很符合我想找的 ... -
关于java优化的东东
2012-07-17 11:33 917最近的机器内存又爆满了，除了新增机器内存外，还应该好好revi ... -
struts2国际化文件配置
2012-07-16 14:51 12588struts2的国际化分三种情况：前台页面的国际化，Act ... -
web.xml常用标签命令详解
2012-06-13 14:14 5314web.xml文件是用来初始化配置信息：比如welcome页面 ... -
关于常用的一些linux下命令
2012-06-12 17:14 8511,linux 创建文件 mkdir XXX 创建目录 ... -
做java开发的困惑
2012-06-05 20:23 974从事java开发也快两年了。 忽然很迷茫了。 也发现越来越 ... -
开发中用到过的UTIL类
2012-06-01 14:58 23641，加密的Util类 /* ============= ... -
build的那些东西
2012-05-30 16:01 1112<?xml version="1.0" ... -
项目数据库执行
2012-04-19 15:44 1338DBtool.java package com.zte ... -
HTTPClient发送请求的几种实现
2012-04-01 17:21 138541，可以使用最基本的流对象 URL对象直接将请求封装 然后发送 ... -
回忆 struts1/2
2012-04-01 17:14 1052struts1 与 struts2的对比。 action类 ...
相关推荐
后台海报制作html静态页面 1. 可以拖动图片 2. 实现了文字字体，颜色，大小 3. 右键菜单可以删除层
代码隐藏页模型与单文件页模型不同的是，代码隐藏页模型将事物处理代码都存放在cs文件中，当ASP.NET网页运行的时候，ASP.NET类生成时会先处理cs文件中的代码，再处理.aspx页面中的代码。这种过程被成为代码分离。 ...
网页弹出提示框和确认框（可拖动）； 采用纯JS编写； 可引入代码直接使用。
bigscreen 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。 项目纯前端-Demo 地址：...
《jQuery权威指南》除了理论知识丰富而全面外，它还有一个最大的特点就是注重实战，每个知识点都有一个完整的案例，包括需求分析、代码实现和结果展示三个部分，而且还包含两个综合性的案例，它的实践性之强是目前...
MyPhpServer(原创,有实现的主要代码) microcai-ibus-t9-输入法源码 如题，主要源码就几个，详细见代码。 MzfHips主动防御 主要在MzfHipsDlg中，程序分析进程数据、驱动数据、注册表数据从而实现主动防御。 超级...
MyPhpServer(原创,有实现的主要代码) microcai-ibus-t9-输入法源码 如题，主要源码就几个，详细见代码。 MzfHips主动防御 主要在MzfHipsDlg中，程序分析进程数据、驱动数据、注册表数据从而实现主动防御。 超级...
MyPhpServer(原创,有实现的主要代码) 如题。 microcai-ibus-t9-输入法源码 如题，主要源码就几个，详细见代码。 MzfHips主动防御 主要在MzfHipsDlg中，程序分析进程数据、驱动数据、注册表数据从而实现主动防御。 ...
可通过拖动蝴蝶取得任意窗口句柄，自动截取窗口长图，支持静态页面自动拼接，手动拼接。
1.zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点 2.zTree v3.x 将核心代码按照功能进行了分割，不需要的代码可以不用加载 3.采用了 延迟加载 技术，...
MyPhpServer(原创,有实现的主要代码) microcai-ibus-t9-输入法源码 如题，主要源码就几个，详细见代码。 MzfHips主动防御 主要在MzfHipsDlg中，程序分析进程数据、驱动数据、注册表数据从而实现主动防御。 超级...
同时该系统率先在国内采用模块化管理，您想要改变页面布局仅需使用鼠标拖拽相应的模块到指定的页面区域即可，真正做到所见即所得。当然，如果您懂HTML语言，您还可以在建站系统的框架内设计个性化的网站，系统给予了...
MyPhpServer(原创,有实现的主要代码) microcai-ibus-t9-输入法源码 如题，主要源码就几个，详细见代码。 MzfHips主动防御 主要在MzfHipsDlg中，程序分析进程数据、驱动数据、注册表数据从而实现主动防御。 超级...
•zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 •采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 •兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 •支持 ...
MyPhpServer(原创,有实现的主要代码) microcai-ibus-t9-输入法源码 如题，主要源码就几个，详细见代码。 MzfHips主动防御 主要在MzfHipsDlg中，程序分析进程数据、驱动数据、注册表数据从而实现主动防御。 超级...
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 ...
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 ...
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON ...
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON ...
源码介绍：本模板已集成数据包，安装即可使用，不带管理后台，如需要可下载建站宝盒配合安装，模板页面可使用网页编辑工具自行修改，需具备一定的html代码技术哦。 安装步骤 1.首先请将下载的安装包解压缩到本地...