静态拖拽行:
<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 975public Map<String, Object ... -
六年JAVA兼职
2014-10-10 14:08 355我叫刘洋，JAVA开发做了六年多了，大大小小的项目做过很多 ... -
新手搭车maven
2014-04-29 15:50 59最近工作太繁忙，一直没有时间来充电。 偶然的一个机会 ... -
关于DB2日常使用中遇到的问题
2013-07-30 10:07 8421 经常需要用到在不drop表的前提下去修改表字段的数据 ... -
我还年轻,我渴望上路.
2012-12-02 09:19 72不知不觉快工作两年多了,最近玩的也比较多,是时候放下玩的心了, ... -
ijetty的应用开发
2012-11-30 16:29 3188最近使用ijetty开发了一 ... -
求助一个关于公式编辑器插件的问题。
2012-08-09 11:27 74附件是一个网页可用的公式编辑器插件。 总体上很符合我想找的 ... -
关于java优化的东东
2012-07-17 11:33 949最近的机器内存又爆满了，除了新增机器内存外，还应该好好revi ... -
struts2国际化文件配置
2012-07-16 14:51 12629struts2的国际化分三种情况：前台页面的国际化，Act ... -
web.xml常用标签命令详解
2012-06-13 14:14 5353web.xml文件是用来初始化配置信息：比如welcome页面 ... -
关于常用的一些linux下命令
2012-06-12 17:14 8971,linux 创建文件 mkdir XXX 创建目录 ... -
做java开发的困惑
2012-06-05 20:23 1024从事java开发也快两年了。 忽然很迷茫了。 也发现越来越 ... -
开发中用到过的UTIL类
2012-06-01 14:58 24171，加密的Util类 /* ============= ... -
build的那些东西
2012-05-30 16:01 1138<?xml version="1.0" ... -
项目数据库执行
2012-04-19 15:44 1380DBtool.java package com.zte ... -
HTTPClient发送请求的几种实现
2012-04-01 17:21 139341，可以使用最基本的流对象 URL对象直接将请求封装 然后发送 ... -
回忆 struts1/2
2012-04-01 17:14 1081struts1 与 struts2的对比。 action类 ...
相关推荐
1. **拖拽界面**：这类工具通常有一个大的设计区域，用户可以在这个区域内拖动各种网页元素，如文本框、图像、按钮、表格等。每个元素都有其对应的HTML标签，如`<p>`（段落）、`<img>`（图像）、`<button>`（按钮）...
1. **页面布局**：网页布局是指在网页设计中如何安排内容元素，如文字、图片、视频等。初学者可以学习如何使用表格、CSS布局（如流式布局、网格布局）或Flexbox来实现网页内容的有序排列。在“蒋灿的衣食住行网”这...
标题中的“extjs4 开发的部分纯静态页面”指的是基于ExtJS 4框架开发的一些不涉及服务器端交互的网页。ExtJS是一个强大的JavaScript库，主要用于构建富客户端应用程序，尤其是那些具有复杂用户界面和数据管理需求的...
当用户按下鼠标并移动时，代码会检测这些事件，更新人物节点的位置，从而实现拖拽效果。 4. **JavaScript库和框架**: 为了简化开发，开发者可能会使用如D3.js、Fabric.js或Graphviz等JavaScript库来处理图形渲染和...
【静态页面 js+xml实现的音乐播放器】 在网页开发中，静态页面通常指的是不依赖服务器端脚本（如PHP、ASP等）而由浏览器直接解释执行的HTML文件。本项目利用JavaScript（js）和XML（xml）技术创建了一个音乐播放器...
Flex组件拖拽框架是一种在Adobe Flex环境中实现的交互设计技术，允许用户通过鼠标操作将组件在界面上自由移动，从而提升用户体验和应用的可操作性。这个框架通常由一系列类和方法组成，用于处理拖放事件，跟踪鼠标...
标题“仿maxthon遨游空白页面静态页面效果”所涉及的知识点主要集中在浏览器定制和网页交互体验上。这里实现的功能是模拟Maxthon遨游浏览器在显示空白页面时的特定交互行为，包括页面的可拖动性和一些特定的功能，且...
在这个"可移动的网页布局"项目中，我们关注的是如何实现网页模块之间的自由拖动功能，让用户可以根据自己的喜好调整页面元素的位置，从而提供更加个性化的浏览体验。 在网页设计中，布局通常分为固定布局、流式布局...
静态分页，虽然名字中有“静态”一词，但在Js中，它实际上是指在不重新加载整个页面的情况下，通过JavaScript代码来更新页面内容，显示不同的数据分页。以下是关于Js静态分页的10种风格及其相关知识点的详细介绍： ...
在这些静态页面中，开发者可能利用jQuery实现了如表单验证、元素动画、动态加载内容、事件处理等多种功能。 描述中提到的"jquery验证"，是指使用jQuery进行表单验证。在网页表单中，为了确保用户输入的数据符合特定...
《xadmin前端静态页面模板详解》 在当前的Web开发领域，前端框架和工具的使用极大地提升了开发效率和用户体验。其中，“xadmin”是一个基于Django管理后台的可定制、可扩展的管理界面，它提供了丰富的自定义选项，...
【标题】"js鼠标图片拖动验证代码.zip"所涉及的知识点主要集中在JavaScript、CSS以及jQuery特效的应用上，这是在网页开发中实现交互性功能的一种常见技术组合。下面将详细介绍这些技术及其在拖动验证中的应用。 **...
在H5开发中，我们经常需要对图像进行各种操作，比如扭曲、自由拉伸和变形，以实现丰富的视觉效果。本教程将详细讲解如何利用HTML5的Canvas API、JavaScript以及OpenGL ES 2.0（WebGL）来实现这些功能。 首先，`...
在IT行业中，HTML静态页面是构建网页的基本元素，主要用于展示信息和交互功能。"后台海报制作html静态页面"是一个项目，旨在创建一个用于设计和编辑海报的后台工具，该工具基于HTML技术，允许用户通过浏览器进行操作...
【标题】"仿百度可拖动版块代码"是一个基于HTML、CSS和JavaScript实现的交互式网页布局示例。这个项目旨在模仿百度网站上部分可拖动调整位置的板块功能，用户可以根据自己的需求自由调整各个内容区域的位置。通过...
在实际操作中，需要根据网页的需求选择合适的行为和事件，并使用javascript脚本代码来实现动作。例如，可以使用javascript脚本代码来实现鼠标悬停事件的触发，或者使用javascript脚本代码来实现点击事件的触发。 ...
Dreamweaver提供了多种方式来构建静态页面，包括可视化编辑、代码编辑和设计视图。可视化编辑允许非编程背景的用户通过拖拽元素来创建页面布局；代码编辑则适用于熟悉HTML、CSS和JavaScript的开发者，可以直接编写源...
这种技术能够使用户通过鼠标拖动来调整网页元素的尺寸，提升用户体验，尤其是在多框架布局中，用户可以根据需要自由调整各部分的显示面积。 在HTML中，框架（Frames）是通过`<frameset>`、`<frame>`等标签实现的，...
标题中的“基于bootstrap和jquery的可拖拽移动div，可预览的页面生成器”指的是一个Web开发工具，它利用Bootstrap框架和jQuery库构建，允许用户通过拖拽和放置的方式设计网页布局，并实时预览编辑效果。Bootstrap是...
在本项目"js仿360桌面悬浮球拖拽到边缘自动贴边特效.zip"中，我们主要探讨的是一个基于HTML5技术实现的交互式网页元素——悬浮球的动态效果。这个悬浮球不仅可以在页面上自由拖动，而且当用户将其拖拽到页面边缘时，...