javascript实现行拖动的方法
本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 red;border-collapse: collapse;}
.table td{border: 1px solid red;height: 20px;}
</style>
</head>
<body>
<h1>行拖动</h1>
<table id="table" class="table">
<tbody>
<tr><td>1</td><td>One</td><td>dom.require</td></tr>
<tr id="2" ><td class="2">2</td><td>Two</td><td>ControlJS </td></tr>
<tr id="3" ><td class="3">3</td><td>Three</td><td>HeadJS</td></tr>
<tr id="4" ><td class="4">4</td><td>Four</td><td>LAB.js</td></tr>
<tr id="5" ><td class="5">5</td><td>Five</td><td>$script.js</td></tr>
<tr id="6" ><td class="6">6</td><td>Six</td><td>NBL.js</td></tr>
</tbody>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
javascript实现鼠标拖动改变层大小的方法
本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b
-
javascript实现可拖动变色并关闭层窗口实例
本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 <html> <head> <title>拖动窗口</title> <meta http-equiv="Content-Type" con
-
原生javascript实现拖动元素示例代码
本文介绍原生javascript实现元素拖动. 思路: 1.首先改变被拖动元素的布局属性,关键是"position:absolue": 2.捕捉鼠标事件"mousedown","mousemove","mouseup": 3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y: 4.紧接着处理"mousemove"事件,通过改变元素的top和left属性来移动元
-
JavaScript:Div层拖动效果实例代码
Div层拖动效果图: 实现:CSS: 复制代码 代码如下: <style>div{position:relative;}</style> JS: 复制代码 代码如下: <script type="text/javascript"> var mouseover=truevar xcoor;var ycoor;function coordinates(){ if (event.srcElement.id.indexOf("wishbroad&q
-
JavaScript模块随意拖动示例代码
复制代码 代码如下: <!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> <meta http-equiv=&qu
-
JavaScript实现DIV层拖动及动态增加新层的方法
本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=
-
最精简的JavaScript实现鼠标拖动效果的方法
相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动:定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
Javascript简单实现可拖动的div
复制代码 代码如下: <html> <head> <script type="text/javascript"> var x; var y; function $(id) { return document.getElementById(id) } function mousedown() { x=event.clientX-$("px").style.pixelLeft; y=event.clientY-$("px&q
-
JavaScript 实现鼠标拖动元素实例代码
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现 二.设计思路 在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件:为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行 复制代
-
javascript实现行拖动的方法
本文实例讲述了javascript实现行拖动的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>行拖动</title> <script> window.onload = functi
-
JavaScript中防止微信浏览器被整体拖动的方法
在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出"该网页由XXX提供"的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验.
-
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
本文实例讲述了jQuery数据检索中根据关键字快速定位GridView指定行的实现方法.分享给大家供大家参考,具体如下: 运行截图如下: 具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowGridviewContent.aspx.cs" Inherits="ShowGridviewContent" %> <!DOCTYPE
-
javascript三种代码注释方法
javascript语言里面的注释方法有三种. 第一种是多行注释"/**/",一般js文件开头,介绍作者,函数等信息. 复制代码 代码如下: /* *author:xxx *day:2008-08-10 */ 第二种注释方法是最常见的"//",在程序间随处可见,只能注释单行. 复制代码 代码如下: //这是一行注释,只能注释单行. //另一行注释 第三种注释不是很常见,会和html内的注释混淆,不推荐使用. 复制代码 代码如下: <!-这是一行注释,只能注释单
-
JavaScript与HTML的结合方法详解
HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一.<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>和</script>会告诉JavaScript
-
JavaScript脚本库编写的方法
JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言.JavaScript的工作方式很有趣.普通网页内都会插入一些JavaScript代码.当浏览器加载该页面时,浏览器的内置解释器将读取并运行它在该页面中找到的JavaScript代码. 做Web开发已经四年,或多或少积累了一些JavaScript脚本.比如,限制input只允许输入数字的脚本:敲回车自动转到下一个控件,相当于Tab键的作用一
-
JavaScript分秒倒计时器实现方法
本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能
-
用javascript连接access数据库的方法
刚看到一个朋友写的用javascript连接excel数据库的程序,想把它改成access数据库的,就找到了这两篇文章 ------------------------------------------ 这几天费了挺大力气在网上查找javascript连接access数据库的方法, 经过整理总结,终于写出一段能够有效执行的代码. 但是这段代码在本地可以正常运行,一旦放到免费个人空间上就没法执 行了,主要原因就是操作权限不够,由于只支持静态页面的免费空间多数都 作了非常严格的限制,所以无论
-
js实现鼠标经过表格行变色的方法
本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){