前端拖拽效果
来源：互联网 发布：服务器编程书籍 编辑：程序博客网 时间：2024/05/16 01:03
适用于一些前端需要拖拽的效果的（目前效果，页面刷新消失），注意黄色地方的参数等根据实际情况修改。当时的效果图，table里面的tr可以上下拖动改变图层效果、
/*服务配置拖拽效果*/ function drag() { function x(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('tr'); div.style.width = '400px'; div.style.height = '1px'; div.style.fontSize = '0'; div.style.background = 'red'; var outer_wrap = x('lot'); outer_wrap.onmousedown = function(event){ //获取列表顺序 var lis = outer_wrap.getElementsByClassName('lot_box'); for(var i = 0; i < lis.length; i++){ lis[i]['pos'] = getElementPos(lis[i]); lis[i]['size'] = getElementSize(lis[i]); } event = event || window.event; var t = event.target || event.srcElement; var t_parent = t.parentNode;// alert(t_parent); if(t_parent.tagName.toLowerCase() == 'tr'){ var p = getMousePos(event); var el = t_parent.cloneNode(true); el.style.position = 'absolute'; el.style.left = t_parent.pos.x + 'px'; el.style.top = t_parent.pos.y + 'px'; el.style.width = t_parent.size.width + 'px'; el.style.height = t_parent.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_parent.pos.x + current.x - p.x + 'px'; el.style.top =t_parent.pos.y + current.y - p.y+ 'px'; document.getElementById("lot").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'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){ if(t_parent != lis[i]){ MOVE.isMove = true; outer_wrap.insertBefore(div,lis[i]); } }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){ if(t_parent != lis[i]){ MOVE.isMove = true; outer_wrap.insertBefore(div,lis[i].nextSibling); } } } } //移除事件 document.onmouseup = function(event){ event = event || window.event; document.onmousemove = null; if(MOVE.isMove){ outer_wrap.replaceChild(t_parent,div); MOVE.isMove = false; } document.body.removeChild(el); el = null; document.body.style.cursor = 'normal'; document.onmouseup = null; } } } }参考其他的项目效果：
0 0
