lyang0000
- 浏览: 26414 次
- 性别:
- 来自: 北京
-
<html>
<head>
<title>drag example</title>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
.mil{
text-align:center;
line-height:96px;
}
</style>
</head>
<body>
<div id="main" style="position:relative;margin:0 auto;width:500px;height:500px;border:1px solid red;">
</div>
</body>
</html>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
var row = 4;
var col = 4;
var width = 96;
var height = 96;
var isIE = false;
var isFF = false;
var arr = [];
var tmp_from = [];
var tmp_to = [];
function DragClass(id,x,y){ //drag class
this.id = id;
this.posX = x;
this.posY = y;
this.type = 0; //1:col 2:row 3:table 4:head
this.obj = null;
this.color = null;
this.px = null;
this.py = null;
}
DragClass.prototype.init = function(){
if(this.type == 1){
this.color = "blue";
this.obj.style.background = this.color;
this.obj.style.color = "yellow";
this.start();
}
else if(this.type == 2){
this.color = "green";
this.obj.style.background = this.color;
this.obj.style.color = "yellow";
this.start();
}
else if(this.type == 3){
this.color = "red";
this.obj.style.background = "red";
this.obj.style.color = "yellow";
this.start();
}
else{
this.color = "black";
this.obj.style.background = this.color;
this.obj.innerHTML = "固定表头";
this.obj.style.color = 'white';
}
};
DragClass.prototype.start = function(){
var self = this;
this.obj.onmousedown = function(e){
e = e || window.event;
if(self.type == 3){
self.px = get_xy(e)[0]-self.posX;
self.py = get_xy(e)[1]-self.posY;
self.changeStyle();
}
else if(self.type == 1){
tmp_from = get_tmp(1,self.id.split('_')[1]);
for(var i in tmp_from){
tmp_from[i].px = get_xy(e)[0]-tmp_from[i].posX;
tmp_from[i].py = get_xy(e)[1]-tmp_from[i].posY;
tmp_from[i].changeStyle();
}
}
else if(self.type == 2){
tmp_from = get_tmp(2,self.id.split('_')[0]);
for(var i in tmp_from){
tmp_from[i].px = get_xy(e)[0]-tmp_from[i].posX;
tmp_from[i].py = get_xy(e)[1]-tmp_from[i].posY;
tmp_from[i].changeStyle();
}
}
document.onmousemove = function(e){
self.move(e);
return false;
};
document.onmouseup = function(e){
self.stop(e);
};
return false;
};
}
DragClass.prototype.move = function(e){
if(this.type == 3){
this.obj.style.left = (get_xy(e)[0]-this.px)+'px';
this.obj.style.top = (get_xy(e)[1]-this.py)+'px';
}
else if(this.type == 1 || this.type == 2){
for(var i in tmp_from){
tmp_from[i].obj.style.left = (get_xy(e)[0]-tmp_from[i].px)+'px';
tmp_from[i].obj.style.top = (get_xy(e)[1]-tmp_from[i].py)+'px';
}
}
}
DragClass.prototype.stop = function(e){
this.check(get_xy(e)[0],get_xy(e)[1]);
if(this.type == 3){
this.changeStyleBack();
}
else{
for(var i in tmp_from){
tmp_from[i].changeStyleBack();
}
}
document.onmousemove = null;
document.onmouseup = null;
}
DragClass.prototype.changeStyle = function(){
this.obj.style.background = "lightgray";
this.obj.style.zIndex = "1";
}
DragClass.prototype.changeStyleBack = function(){
this.obj.style.background = this.color;
this.obj.style.zIndex = '0';
}
DragClass.prototype.check = function(x,y){ //check single
var flag = true;
var flags = true;
for(var key in arr){
var i = arr[key].id.split("_")[0];
var j = arr[key].id.split("_")[1];
if(this.type == 3 && arr[key].type == 3){
if(x<30+j*100+width && x>30+j*100 && y<30+i*100+height && y>30+i*100){
this.table_each(arr[key]);
flag = false;
break;
}
}
else if(this.type == 1 && arr[key].type == 1){
if(x<30+j*100+width && x>30+j*100 && y<30+i*100+height && y>30+i*100){
tmp_to = get_tmp(1, j);
if(tmp_to.length == tmp_from.length){
//alert('ok');
for(var ii=0; ii<tmp_to.length; ii++){
tmp_from[ii].table_each(tmp_to[ii]);
}
}
flags = false;
break;
}
}
else if(this.type == 2 && arr[key].type == 2){
if(x<30+j*100+width && x>30+j*100 && y<30+i*100+height && y>30+i*100){
tmp_to = get_tmp(2, i);
if(tmp_to.length == tmp_from.length){
//alert('ok');
for(var ii=0; ii<tmp_to.length; ii++){
tmp_from[ii].table_each(tmp_to[ii]);
}
}
flags = false;
break;
}
}
}
if(flag){
this.obj.style.left = this.posX + 'px';
this.obj.style.top = this.posY + 'px';
}
if(flags){
for(var x in tmp_from){
tmp_from[x].obj.style.left = tmp_from[x].posX+'px';
tmp_from[x].obj.style.top = tmp_from[x].posY+'px';
}
}
}
DragClass.prototype.table_each = function(o){ //交换
var px = this.posX;
var py = this.posY;
var id = this.id;
this.posX = o.posX;
this.posY = o.posY;
this.id = o.id;
o.id = id;
o.posX = px;
o.posY = py;
this.obj.style.left = this.posX + 'px';
this.obj.style.top = this.posY + 'px';
o.obj.style.left = o.posX+'px';
o.obj.style.top = o.posY+'px';
}
function init(){
var frag = document.createDocumentFragment(); //create fragment
for(var i=0; i<row; i++){
for(var j=0; j<col; j++){
var span = document.createElement("span");
span.className = "mil";
span.style.position = "absolute";
span.style.width = width+'px';
span.style.height = height+'px';
span.style.top = 30+i*100+'px';
span.style.left = 30+j*100+'px';
span.id = i+'_'+j;
var obj = new DragClass(span.id, 30+j*100, 30+i*100);
obj.obj = span;
arr.push(obj);
if(i==0 && j==0){ //head
obj.type = 4;
}
else if(i==0){ // col head
span.innerHTML = "列头"+j;
obj.type = 1;
}
else if(j==0){ // row head
span.innerHTML = "行头"+i;
obj.type = 2;
}
else{
span.innerHTML = "表格"+i+"_"+j;
obj.type = 3;
}
obj.init();
frag.appendChild(span);
}
}
$('main').appendChild(frag);
}
function get_tmp(type, i){
var tmp = [];
for(var x in arr){
if(type == 1){
if(arr[x].id.split('_')[1] == i){
tmp.push(arr[x]);
}
}
else{
if(arr[x].id.split('_')[0] == i)
tmp.push(arr[x]);
}
}
tmp.sort(function(a,b){ //asc sort
var ax = a.id.split('_')[0];
var ay = a.id.split('_')[1];
var bx = b.id.split('_')[0];
var by = b.id.split('_')[1];
if(ax < bx || ay < by)
return 1;
else
return -1;
})
return tmp;
}
function get_xy(e){ //get mouse
e = e || window.event;
var arr = [];
var x = e.pageX || e.clientX;
var y = e.pageY || e.clientY;
x = x-$('main').offsetLeft;
arr[0] = x;
arr[1] = y;
return arr;
}
window.onload = function(){
init();
}
</script>
某公司的一道js面试题，要实现一种类似于可拖动表格的功能！
分享到：
发表评论
-
关于CSS hack的一张图
2010-06-23 10:15 785今天在网上浏览的时候看见了一张总结的关于css hack的图， ... -
js绑定事件打印索引的方法整理
2010-05-13 16:58 1613很常见的问题，dom对象 ... -
javascript继承
2010-05-05 10:59 740<script type="text/java ... -
javascript closure
2010-03-27 08:57 1055JAVASCRIPT闭包(Closure)（闭 ... -
javascript作用域
2010-03-27 08:55 1151javascript作用域 一 js的运行顺序 （先声明后赋 ... -
CSS定位和浮动
2009-12-01 22:37 1974一些css中关于盒模型的定位和浮动的点滴。 CSS 定 ... -
css盒模型
2009-12-01 22:23 988一些css盒模型的比较 ... -
浏览器内核
2009-11-29 22:01 1094浏览器内核: 浏览 ... -
js的一个简单效果
2009-11-27 00:41 708一个js的拖拽小效果，本来是给以前公司webgame项 ...
相关推荐
JavaScript 面试题知识点总结 JavaScript 面试题是前端开发领域中常见的面试题，涵盖了 JavaScript 基础、Web 前端开发等方面的知识点。本文将对 JavaScript 面试题的知识点进行总结，包括 Object.create、...
某公司测试岗面试题
JavaOOP面试题 Java集合/泛型面试题 Java异常面试题 Java中的IO与NIO面试题 Java反射面试题 Java序列化面试题 Java注解面试题 多线程&并发面试题 JVM面试题 Mysql面试题 Redis面试题 Memcached面试题 MongoDB面试题 ...
云计算面试题之ELK面试题，运维工程师必备云计算面试题之ELK面试题，运维工程师必备云计算面试题之ELK面试题，运维工程师必备云计算面试题之ELK面试题，运维工程师必备云计算面试题之ELK面试题，运维工程师必备...
面试题集合通常包含各种问题，旨在考察候选人在JS基础、jQuery库以及Ajax技术方面的理解和应用能力。现在，让我们深入探讨这些关键知识点。 1. **JavaScript基础**： - 变量与数据类型：了解`var`, `let`, `const`...
Java面试题、设计模式面试题、Spring面试题、MyBatis面试题、Memcached面试题、MongoDB面试题、ZooKeepe面试题、RabbitMQ面试题、HTML面试题、CSS面试题、Vue面试题、React面试题、JavaScript面试题、2021java面试题...
企业公司软件测试面试笔试题集合 软件测试面试题 （测试基础）.doc 01_企业面试试卷（综合）.doc 01_企业面试试卷（综合）_参考答案.doc 04_企业面试试卷（测试基础）.doc 04_企业面试试卷（测试基础）_参考答案.doc...
7.md 前端面试JS 相关问题 JavaScript 8.md 前端面试jQuery 相关问题 jQuery 9.md 前端面试代码相关问题 JavaScript 10.md 前端面试有趣的问题 General 11.md 一些面试题 General 12.md BAT及互联网公司2014...
2、各个公司面试题 3、J2EE初学者面试题 4、J2EE面试题（打码查错题） 5、java_华为笔试题 6、java常见面试题 7、java程序员面试宝典 8、java面试题及答案 9、java面试题编程篇 10、Oracle面试题 11、Oracle企业面试...
JavaScript常见面试题
大公司javaScript经典面试题汇总
这个名为"前端面试题库，包含不限于Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题，高频面试题.zip"的压缩包文件，显然为准备前端面试的求职者提供了全面的学习...
为了提高 JavaScript 的性能，需要遵循严格模式、将 js 脚本放在页面底部、将 js 脚本将脚本成组打包、使用非阻塞方式下载 js 脚本、尽量使用局部变量来保存全局变量、尽量减少使用闭包、使用 window 对象属性方法时...
大数据面试题V3.0完成了。共523道题，679页，46w+字，来源于牛客870+篇面经。 主要分为以下几部分： Hadoop面试题：100道 Zookeeper面试题：21道 Hive面试题：47道 Flume面试题：11道 Kafka面试题：59到 HBase面试题...
"JavaScript面试题集锦详解" 这篇文章涵盖了JavaScript的多个方面，包括eval函数、window和document对象、null和undefined的区别、数组的map方法、事件机制、use strict模式等。 eval函数 eval函数可以将字符串...
这份"js面试技巧，面试题总结，MK"文档显然包含了作者在学习过程中整理的JS面试重点和常见问题，对于准备JS面试或者巩固基础知识的人来说是一份宝贵的资料。 在JS面试中，以下知识点经常会被考察： 1. **基础概念*...
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它的地位尤为重要。...在压缩包文件“面试题”中，可能会包含这些概念的实际题目，建议逐一解答并深入研究，以提高自己的JavaScript技能。
2023年最新版--Java+最常见的+200++面试题汇总+答案总结汇总 阿里百度美团面试题合集 大数据面试题 100道 多线程面试59题（含答案） 最新JAVA面试题总结之基础/框架/数据库/JavaWeb/Redis BIO,NIO,AIO,Netty面试题 ...
3. **JS面试题**： JavaScript是前端开发的基础，面试中会涉及到语言特性、数据类型、作用域、闭包、原型链、异步编程（回调、Promise、async/await）、事件循环、错误处理等。 4. **HTTP面试题**： 理解HTTP协议...