- 浏览: 104661 次
- 性别:
- 来自: 大连
文章分类
最新评论
-
liushian:
就是啊,麻烦把web中的相关代码文件也给一份吧
一个WebChat的服务(可插拔jetty版module) -
luotb:
附件里面没有和前台相关的文件、?
一个WebChat的服务(可插拔jetty版module) -
liushooter:
最近有个笔试题 有一个7进制数 转换成 10进制 不让用冥 不 ...
2进制和10进制的相互转化 -
nookiehuihui:
能不能在boxover中添加function
改良后的boxover
<!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="Content-Type" content="text/html; charset=gb2312" /> <title>Freedom</title> <style type="text/css"> body { width:100%; max-height:100%; padding:0px; margin:0px; text-align:center; } .cell { float:left; clear:right; } .row { clear:both; } .r_nbsp { width:20px; } .root { width:868px; margin: 0 auto; } .root * { /*次属性FF的说*/ -moz-user-select:none; } .line { width:202px; line-height:20px; height:20px; overflow:hidden; font-size:12px; } .move { border:#CCCCCC 1px solid; width:200px; height:aotu; } .title { height:24px; cursor:move; background:#0080C0; font-size:12px; font-weight:bold; color:#FFFFFF; line-height:24px; text-align:center; } .content { border-top:#CCCCCC 1px solid; height:100px; background-color:#F7F7F7; } .CDrag_temp_div { border:#CCCCCC 1px dashed; } </style> <script type="text/javascript"> var Class = { //创建类 create: function () { return function () { this.initialize.apply(this, arguments); }; } }; var $A = function (a) { //转换数组 return a ? Array.apply(null, a) : new Array; }; var $ = function (id) { //获取对象 return document.getElementById(id); }; Object.extend = function (a, b) { //追加方法 for (var i in b) a[i] = b[i]; return a; }; Object.extend(Object, { addEvent : function (a, b, c, d) { //添加函数 if (a.attachEvent) a.attachEvent(b[0], c); else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false); return c; }, delEvent : function (a, b, c, d) { if (a.detachEvent) a.detachEvent(b[0], c); else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false); return c; }, reEvent : function () { //获取Event return window.event ? window.event : (function (o) { do { o = o.caller; } while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0])); return o.arguments[0]; })(this.reEvent); } }); Function.prototype.bind = function () { //绑定事件 var wc = this, a = $A(arguments), o = a.shift(); return function () { wc.apply(o, a.concat($A(arguments))); }; }; var Table = Class.create(); Table.prototype = { initialize : function () { //初始化 var wc = this; wc.cols = new Array; //创建列 }, addCols : function (o) { //添加列 var wc = this, cols = wc.cols, i = cols.length; return cols[i] = { id : i, div : o, rows : new Array, //创建行 addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow }; }, addRow : function (o) { //添加行 var wc = this, rows = wc.rows, i = rows.length; return rows[i] = { id : i, div : o, cols : wc }; }, inRow : function (a, b) { //插入行 var wc = b.cols = this, rows = wc.rows, i; if (a < rows.length) { for (i = a ; i < rows.length ; i ++) rows[i].id ++; rows.splice(a, 0, b); b.id = a; return b; } else { b.id = rows.length; return rows[b.id] = b; } }, delRow : function (a) { //删除列 var wc = this, rows = wc.rows, i, r; if (a >= rows.length) return; r = rows[a]; rows.splice(a, 1); for (i = a ; i < rows.length ; i ++) rows[i].id = i; return r; } }; var CDrag = Class.create(); CDrag.IE = /MSIE/.test(window.navigator.userAgent); CDrag.prototype = { initialize : function () { //初始化成员 var wc = this; wc.table = new Table; //建立表格对象 wc.iFunc = wc.eFunc = null; wc.obj = { on : { a : null, b : "" }, row : null, left : 0, top : 0 }; wc.temp = { row : null, div : document.createElement("div") }; wc.temp.div.setAttribute(CDrag.IE ? "className" : "class", "CDrag_temp_div"); wc.temp.div.innerHTML = " "; }, reMouse : function (a) { //获取鼠标位置 var e = Object.reEvent(); return { x : document.documentElement.scrollLeft + e.clientX, y : document.documentElement.scrollTop + e.clientY }; }, rePosition : function (o) { //获取元素绝对位置 var $x = $y = 0; do { $x += o.offsetLeft; $y += o.offsetTop; } while ((o = o.offsetParent) && o.tagName != "BODY"); return { x : $x, y : $y }; }, sMove : function (o) { //当拖动开始时设置参数 var wc = this; if (wc.iFunc || wc.eFinc) return; var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.div, position = wc.rePosition(div); obj.row = o; obj.on.b = "me"; obj.left = mouse.x - position.x; obj.top = mouse.y - position.y; temp.row = document.body.appendChild(div.cloneNode(true)); //复制预拖拽对象 with (temp.row.style) { //设置复制对象 position = "absolute"; left = mouse.x - obj.left + "px"; top = mouse.y - obj.top + "px"; zIndex = 100; opacity = "0.3"; filter = "alpha(opacity:30)"; } with (temp.div.style) { //设置站位对象 height = div.clientHeight + "px"; width = div.clientWidth + "px"; } /*div.parentNode.insertBefore(temp.div, div); div.style.display = "none"; //隐藏预拖拽对象*/ div.parentNode.replaceChild(temp.div, div); wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc)); wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc)); document.onselectstart = new Function("return false"); }, iMove : function () { //当鼠标移动时设置参数 var wc = this, cols = wc.table.cols, mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, row = obj.row, div = temp.row, t_position, t_cols, t_rows, i, j; with (div.style) { left = mouse.x - obj.left + "px"; top = mouse.y - obj.top + "px"; } for (i = 0 ; i < cols.length ; i ++) { t_cols = cols[i]; t_position = wc.rePosition(t_cols.div); if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x) { if (t_cols.rows.length > 0) { //如果此列行数大于0 if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) { //如果鼠标位置大于第一行的位置即是最上。。 //向上 obj.on.a = t_cols.rows[0]; obj.on.b = "up"; obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div); } else if (t_cols.rows.length > 1 && t_cols.rows[0] == row && wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) { //如果第一行是拖拽对象而第鼠标大于第二行位置则,没有动。。 //向上 obj.on.b = "me"; t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div); } else { for (j = t_cols.rows.length - 1 ; j > -1 ; j --) { //重最下行向上查询 t_rows = t_cols.rows[j]; if (t_rows == obj.row) continue; if (wc.rePosition(t_rows.div).y < mouse.y) { //如果鼠标大于这行则在这行下面 if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) { //如果这行有下一行则重这行下一行的上面插入 t_cols.rows[t_rows.id + 1].div.parentNode. insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div); obj.on.a = t_rows; obj.on.b = "down"; } else if (t_rows.id + 2 < t_cols.rows.length) { //如果这行下一行是拖拽对象则插入到下两行,即拖拽对象返回原位 t_cols.rows[t_rows.id + 2].div.parentNode. insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div); obj.on.b = "me"; } else { //前面都没有满足则放在最低行 t_rows.div.parentNode.appendChild(temp.div); obj.on.a = t_rows; obj.on.b = "down"; } return; } } } } else { //此列无内容添加新行 t_cols.div.appendChild(temp.div); obj.on.a = t_cols; obj.on.b = "new"; } } } }, eMove : function () { //当鼠标释放时设置参数 var wc = this, obj = wc.obj, temp = wc.temp, row = obj.row, div = row.div, o_cols, n_cols; if (obj.on.b == "up") { //向最上添加 o_cols = obj.row.cols; n_cols = obj.on.a.cols; n_cols.inRow(0, o_cols.delRow(obj.row.id)); } else if (obj.on.b == "down") { //相对向下添加 o_cols = obj.row.cols; n_cols = obj.on.a.cols; n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id)); } else if (obj.on.b == "new") { //向无内容列添加 o_cols = obj.row.cols; n_cols = obj.on.a; n_cols.inRow(0, o_cols.delRow(obj.row.id)); } temp.div.parentNode.replaceChild(div, temp.div); temp.row.parentNode.removeChild(temp.row); delete temp.row; Object.delEvent(document, ["onmousemove"], wc.iFunc); Object.delEvent(document, ["onmouseup"], wc.eFunc); document.onselectstart = wc.iFunc = wc.eFunc = null; }, add : function (o) { //添加对象 var wc = this; Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], ["onmousedown"], wc.sMove.bind(wc, o)); }, parse : function (o) { //初始化成员 var wc = this, table = wc.table, cols, i, j; for (i = 0 ; i < o.length ; i ++) { cols = table.addCols(o[i].cols); for (j = 0 ; j < o[i].rows.length ; j ++) wc.add(cols.addRow(o[i].rows[j])); } } }; Object.addEvent(window, ["onload"], function () { var wc = new CDrag; wc.parse([ { cols : $("m_1"), rows : [$("m_1_1"), $("m_1_2"), $("m_1_3"), $("m_1_4")] }, { cols : $("m_2"), rows : [$("m_2_1"), $("m_2_2"), $("m_2_3"), $("m_2_4")] }, { cols : $("m_3"), rows : [$("m_3_1"), $("m_3_2"), $("m_3_3"), $("m_3_4")] }, { cols : $("m_4"), rows : [$("m_4_1"), $("m_4_2"), $("m_4_3"), $("m_4_4")] } ]); }); </script> </head><body><br /> <div class="root"> <div class="cell" id="m_1"> <div class="line"> 第一列</div> <div class="move" id="m_1_1"> <div class="title"> 第一列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_1_2"> <div class="title"> 第一列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_1_3"> <div class="title"> 第一列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_1_4"> <div class="title"> 第一列的第四个的说</div> <div class="content"> </div> </div> </div> <div class="cell r_nbsp"> </div> <div class="cell" id="m_2"> <div class="line"> 第二列</div> <div class="move" id="m_2_1"> <div class="title"> 第二列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_2_2"> <div class="title"> 第二列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_2_3"> <div class="title"> 第二列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_2_4"> <div class="title"> 第二列的第四个的说</div> <div class="content"> </div> </div> </div> <div class="cell r_nbsp"> </div> <div class="cell" id="m_3"> <div class="line"> 第三列</div> <div class="move" id="m_3_1"> <div class="title"> 第三列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_3_2"> <div class="title"> 第三列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_3_3"> <div class="title"> 第三列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_3_4"> <div class="title"> 第三列的第四个的说</div> <div class="content"> </div> </div> </div> <div class="cell r_nbsp"> </div> <div class="cell" id="m_4"> <div class="line"> 第四列</div> <div class="move" id="m_4_1"> <div class="title"> 第四列的第一个的说</div> <div class="content"> </div> </div> <div class="move" id="m_4_2"> <div class="title"> 第四列的第二个的说</div> <div class="content"> </div> </div> <div class="move" id="m_4_3"> <div class="title"> 第四列的第三个的说</div> <div class="content"> </div> </div> <div class="move" id="m_4_4"> <div class="title"> 第四列的第四个的说</div> <div class="content"> </div> </div> </div> </div> </body></html>
转至:http://www.jsweb8.cn/html/js_page/1251.htm
可以去看效果!
发表评论
-
一个tool bar plugin 类似人人网下面的(基于jQuery)
2010-08-17 11:54 2182/* * Chat Tool Bar plugin ... -
让DIV跟着滚动条移动
2010-08-16 14:18 1495jQuery(window).scroll( functi ... -
IE8 window.open 导出excel文件问题
2010-07-15 09:43 5956用window.open(url)的方式来导出excel表格在 ... -
改良后的boxover
2009-11-23 16:06 1945tooltip 显示框 ,用ajax获取提示信息 1.载入 ... -
jquery弹出div图层(带蒙板)
2009-10-19 17:30 14438页面载入: <script type="t ... -
js取时间(server+client)
2009-10-19 16:58 2139一:用js获取server时间 var xmlHttp = ... -
jquery鼠标跟随div
2009-10-18 18:57 4872js code var floatX,floatY,box ... -
IE与FF在css的不同解决不同
2009-09-08 13:38 1404一、CSS HACK(兼容各种浏览器的CSS秘方)写法 以下两 ... -
js实现信息滚动显示
2009-07-14 18:27 11090<style type="text/css ... -
js操作cookie
2009-07-14 10:57 840//删除名称为name的Cookie function ... -
js弹出窗(背景是蒙板)
2009-07-14 10:51 1755function alertWin(title, msg, ... -
动态鼠标滑过提示
2009-07-14 10:44 1268<style> .tableBorder7{ ... -
js弹出窗口回传值
2009-07-14 10:08 6145在父窗口的js代码: function alertWind ...
相关推荐
JS 拖拽例子 Example draganddrop
一个关于javascript的拖拽的例子,很简单,新手学习用。
js拖动代码 js拖动效果 js拖动例子
JS 拖拽的2个例子 各有优缺点 大家可以下载学习了。
js拖动层例子-整个网页可以拖动! 值得下载看看!资源免费,大家分享!!
php+mysql+js拖拽div实例 代码已改好,放在目录下可直接使用。适合新手学习!
一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子
界面好看 效果绚丽 拿来即用 js实现DIV自定义拖拽并且保存的例子 非常适合web2.0开发使用 如果配合jquery效果更好 且能保存数据至数据库、cookie、xml等
JS判断多图层拖动重叠例子,适合任何浏览器
一个js拖拽上传的控件,并且含有自己写的一个demo
可以实现行拖动,div拖动,图片拖动,例子中是行之间的拖动。
打开html可直接查看例子,例子中图片url写死的,是一个网络图片,如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
dropzone.js 实现拖拽上传文件例子,包含Js、CSS
是一个很好的通过鼠标拖动表格就可以改变表格宽度的例子。是做项目的时候用到下载下来的。现在资源分0分在这里分享给大家。希望有朋友能用的到。
dropDiv2.0是我在拖拽div例子的基础上改进的例子。相对于拖拽例子,这里增添了event浏览器兼容性处理、禁鼠标选中的一些机制。
采用纯js实现网页界面元素的拖动操作程序例子代码。http://www.linjon.cn, 成都领君科技有限公司
js Slider拖动条与滑块改变参数值的例子附完整演示源码,这种效果可以应用在游戏开发中,或者日常一些需要用户设定参数的WEB开发中,比如音量调节、速度调节、时间设定等。通过本示例演示,你可以从中获取使用方法,...
js实现图片缩放与拖动,纯js,有例子,点击就可以用
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
在网上找的(vue3+sortable.js根本跑不起来)网上好多例子在vue3下根据跑不起来于是,也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...