js通过拖动调整元素位置代码实例
分类：实例代码
分享一段代码实例，它实现了通过拖动调整相互位置的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
-moz-user-select: none;
}
body {
font-size: 16px;
}
ul {
margin: 5px 100px;
list-style: none;
}
li {
width: 193px;
height: 40px;
line-height: 40px;
padding: 0;
list-style: none;
text-align: center;
float: left;
transition: all 0.1s ease-in-out;
}
li:hover {
background: #bdb76b;
cursor: move;
}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
<li>前端教程网五</li>
<li>前端教程网六</li>
</ul>
<script type="text/javascript">
var color = ["#FFF8DC", "##FFEFDB", "#FFE7BA", "#FFE1FF", "#FFD39B", "#FFBBFF", "#FFAEB9", "#FF8C69", "#FF8247"];
var opacity = [0.5, 0.6, 0.7];
function $(id) {
return document.getElementById(id);
}
//获取鼠标位置
function getMousePos(e) {
return {
x: e.pageX || e.clientX + document.body.scrollLeft,
y: e.pageY || e.clientY + document.body.scrollTop
}
}
//获取元素位置
function getElementPos(el) {
return {
x: el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
y: el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
}
}
//获取元素尺寸
function getElementSize(el) {
return {
width: el.offsetWidth,
height: el.offsetHeight
}
}
//禁止选择
document.onselectstart = function() {
return false;
}
//判断是否有挪动
var MOVE = {};
MOVE.isMove = false;
//就是创建的标杆
var div = document.createElement('div');
div.style.width = "193px";
div.style.height = '1px';
div.style.fontSize = '0';
div.style.background = 'red';
div1 = div.cloneNode(true);
div1.style.background = "blue";
var outer_wrap = $('outer_wrap');
outer_wrap.onmousedown = function(event) {
//获取列表顺序
var lis = outer_wrap.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
}
for (var i = 0; i < lis.length; i++) {
lis[i]['pos'] = getElementPos(lis[i]);
lis[i]['size'] = getElementSize(lis[i]);
lis[i].style.background = color[i];
lis[i].style.opacity = opacity[i % 3];
lis[i].onmousedown = function() {
outer_wrap.insertBefore(div1, this);
div1.style.margin = "0 0 0 " + this.index * 193 + "px";
this.style.color = "red";
}
}
event = event || window.event;
var t = event.target || event.srcElement;
if (t.tagName.toLowerCase() == 'li') {
var p = getMousePos(event);
var el = t.cloneNode(true);
el.style.position = 'absolute';
el.style.left = t.pos.x + 'px';
el.style.top = t.pos.y + 'px';
el.style.width = t.size.width + 'px';
el.style.height = t.size.height + 'px';
el.style.border = '1px solid #d4d4d4';
el.style.background = '#d4d4d4';
el.style.opacity = '0.7';
document.body.appendChild(el);
document.onmousemove = function(event) {
event = event || window.event;
var current = getMousePos(event);
el.style.left = t.pos.x + current.x - p.x + 'px';
el.style.top = t.pos.y + current.y - p.y + 'px';
document.body.style.cursor = 'move';
//判断插入点
for (var i = 0; i < lis.length; i++) {
if (current.x >= lis[i]['pos']['x'] && current.x <= lis[i]['pos']['x'] + lis[i]['size']['width']) {
if (t != lis[i] || current.x > i * 193) {
MOVE.isMove = true;
s = lis[i];
div.style.margin = "0 0 0 " + i * 193 + "px";
outer_wrap.insertBefore(div, lis[i]);
}
}
}
}
//移除事件
document.onmouseup = function(event) {
event = event || window.event;
document.onmousemove = null;
if (MOVE.isMove) {
outer_wrap.replaceChild(t, div);
outer_wrap.replaceChild(s, div1);
MOVE.isMove = false;
}
document.body.removeChild(el);
el = null;
document.body.style.cursor = 'normal';
document.onmouseup = null;
}
}
}
</script>
</body>
</html>
js通过拖动调整元素位置代码实例，这样的场景在实际项目中还是用的比较多的，关于js通过拖动调整元素位置代码实例就介绍到这了。
js通过拖动调整元素位置代码实例属于前端实例代码，有关更多实例代码大家可以查看。