js实现单元格拖拽效果
本文实例为大家分享了js实现单元格拖拽效果的具体代码，供大家参考，具体内容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
}
#box div {
position: absolute;
width: 100px;
height: 100px;
border-radius: 15px;
text-align: center;
line-height: 100px;
font-size: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//生成结构
var oDiv = document.getElementById("box");
var ml = mt = 10;
//行列结构
for(var i = 0; i < 3; i++) { //行
for(var j = 0; j < 3; j++) { //列
var aDiv = document.createElement("div");
oDiv.appendChild(aDiv);
aDiv.style.left = j * (aDiv.offsetWidth + ml) + "px";
aDiv.style.top = i * (aDiv.offsetHeight + mt) + "px";
//背景颜色随机
aDiv.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"; //256=(256-0+1)+0;
}
}
//添加文字
var str = "ABCDEFGHI";
var aItems = oDiv.children;
for(var i = 0; i < str.length; i++) {
aItems[i].innerText = str[i];
}
//拖拽
for(var i = 0; i < aItems.length; i++) {
aItems[i].onmousedown = function(e) {
var evt = e || event;
var x = evt.offsetX;
var y = evt.offsetX;
var dragNode = this;
var cloneNode = dragNode.cloneNode();
oDiv.replaceChild(cloneNode, dragNode);
cloneNode.style.border = "1px dashed #ccc";
oDiv.appendChild(dragNode);
dragNode.style.zIndex = 1;
document.onmousemove = function(e) {
var evt = e || event;
var _left = evt.clientX - x;
var _top = evt.clientY - y;
dragNode.style.left = _left + "px";
dragNode.style.top = _top + "px";
return false; //选中,文字也会拖动 去除默认行为
}
document.onmouseup = function() {
var disArr =[];
var newArr =[];
for(var i = 0; i < aItems.length-1; i++) {
var disx = dragNode.offsetLeft - aItems[i].offsetLeft;
var disy = dragNode.offsetTop - aItems[i].offsetTop;
var dis= Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2));
disArr.push(dis);
newArr.push(dis);
}
disArr.sort(function(a, b) {
return a - b;
});
var minval = disArr[0];
var minIndex = newArr.indexOf(minval);
dragNode.style.left = aItems[minIndex].style.left;
dragNode.style.top = aItems[minIndex].style.top;
aItems[minIndex].style.left = cloneNode.style.left;
aItems[minIndex].style.top = cloneNode.style.top;
oDiv.removeChild(cloneNode);
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
d3.js实现图形拖拽
本文实例为大家分享了d3.js图形拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽操作</title> </head> <body> <script src = "d3.js"></script&g
-
js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script> <style&
-
js实现拖拽效果
首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20
-
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ
-
Sortable.js拖拽排序使用方法解析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上 ondragover 事件:拖拽元素在目
-
JS实现盒子拖拽效果
本文实例为大家分享了JS实现盒子拖拽效果的具体代码,供大家参考,具体内容如下 效果: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
javascript实现移动端上的触屏拖拽功能
本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi
-
js实现登录拖拽窗口
本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下 做这个案例的两个关键点: 1.用js将盒子在可视区域居中显示 本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些. 方法: 盒子的left值 = (可视区域的宽度 - 盒子自身的宽度)/ 2; 盒子的top值 = (可视区域的高度 - 盒子自身的高度)/ 2; 这样盒子就居中显示 2.先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动 这一点上要注意的点: 1)鼠标按下时,鼠标相对盒子X方向
-
使用js实现的简单拖拽效果
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti
-
JavaScript实现拖拽盒子效果
本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码,供大家参考,具体内容如下 实现效果: 1.单击关闭,关闭盒子 2.点击左上方'点击注册',打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤: 1.在页面最上方设置一个盒子,里面有一个超链接,超链接里面设置href="javascript:void(0);",再点击时不打开网页. 2.再设置一个可以拖拽的盒子,盒子嵌套一个蓝色盒子为的最上方的蓝色区域,蓝色盒子