javascript拖动,前端js拖拽

如何用javascript实现模块的拖动?

1、拖动层：

div id="div1" style="position:absolute; background-color:#0064c2; width:150px; height:150px;" onmousedown="MoveStart(this,event)"/div

script

function MoveStart(o,event){

var oX = event.clientX-o.offsetLeft;

var oY = event.clientY-o.offsetTop;

document.attachEvent("onmousemove",MoveIt);

document.attachEvent("onmouseup",MoveStop);

event.cancelBubble = true;

event.returnValue = false;

function MoveIt(e){

e = window.event;

o.style.left = (e.clientX-oX)+'px';

o.style.top = (e.clientY-oY)+'px';

event.cancelBubble = true;

}

function MoveStop(){

document.detachEvent("onmouseup",MoveStop);

document.detachEvent("onmousemove",MoveIt);

}

event.cancelBubble = true;

}

/script

2、关掉浏览器，拖动以后的层还可以留在拖动后的位置。

只需要在用户退出时，记录层的当前位置，存储于数据库中，下次用户再打开此页面时，从数据库中读取层的位置再显示。

相关问答

Q1: javascript 鼠标拖动问题？

改成这样，但是这时候只能ie起作用

window.onload=function fin()

{

obj=document.getElementById('drag');

obj.onmousemove=mouseMove;

obj.onmouseup=mouseUp;

obj.onmouseOut=mouseOut;

obj.onmouseOver=mouseOver;

mouseDown(obj);

}

2、还有获取div当前位置用

x = d.offsetLeft

y = d.offsetTop

3、鼠标移动事件注册到body上，否则鼠标在div外边就没法正常移动了

4、window.onload=function()不需要方法名

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

title/title

stylebody,html{margin:0px;padding:0px;height:100%;width:100%;}/style

script type="text/javascript"

var configdata = {

obj:null,

offset:{x:0,y:0},

isdrag:false

}

window.onload = function(){

configdata.obj = document.getElementById("drag");

document.body.onmousemove = mmove;

document.body.onmouseup = function(){configdata.isdrag=false};

configdata.obj.onmousedown = mdown;

configdata.obj.onmouseup = function(){configdata.isdrag=false};

}

function mdown(ev)

{

configdata.isdrag=true

var e = ev||event;

var l = configdata.obj.offsetLeft;

var t = configdata.obj.offsetTop;

var mos = mousePosition(e);

configdata.offset.x = mos.x-l;

configdata.offset.y = mos.y-t;

}

function mmove(ev)

{

if(configdata.isdrag)

{

var e = ev||event;

var mpos = mousePosition(e);

configdata.obj.style.left = mpos.x-configdata.offset.x+"px";

configdata.obj.style.top = mpos.y-configdata.offset.y+"px";

}

}

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

/script

/head

body

div id="drag" style=" background-color:#0F3; width:100px; height:100px;position:absolute;left:0px;top:0px" /div

/body

/html

Q2: javascript拖动元素时怎样防止鼠标离开被拖动的元素

你按这个思路来——onclick的是这个元素，但是onmousemove的是window窗口或document对象，再不济就HTML或body元素。

总之你让鼠标不离开元素基本不可能，这跟浏览器解析速度有关，浏览器解析速度又跟CPU有关，你不可能控制用户电脑配置不是。

Q3: javascript 拖拽移动滚动条

script type="text/javascript"

var _y;

var scrolling=false;

document.onmousedown=function(e){

var e = window.event || e;

_y = e.clientY;

scrolling=true;

};

document.onmousemove = function(e){

if(!scrolling) return;

var e = window.event || e;

document.body.style.cursor="move";

var move=(e.clientY-_y)/10;

var scrollTop=document.body.scrollTop + document.documentElement.scrollTop;

window.scrollTo(0,scrollTop+move);

};

document.onmouseup=function(){

scrolling=false;

document.body.style.cursor="default";

};

/script

不足是会选中文字- -！

Q4: 怎么配合JavaScript拖动页面中控件

配合拖动页面中控件达到页面动态生成后页面的排版效果。!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML

HEAD

title窗体设计/title

SCRIPT language="JavaScript" src="/cmsweb/script/jscommon.js"/SCRIPT

script language="JavaScript"

!--

/*

代码说明：

－、下面代码中的"xx"、"yy"是为移动元素所需的2个动态属性，分别记录移动前的X和Y坐标。

－、主元素(主选择元素)：第一个选中的元素；次元素(次选择元素)：第二个开始选中的所有元素

*/

var IsDesignChanged=false

var IsDraging=false //判断是否处于拖动状态中

var xMouseBefMove, yMouseBefMove //移动元素前的鼠标X、Y坐标

var currentSelMainElement //当前选中的主元素（第一个选中的元素）

var currentDot //当前正移动(正改变主选择元素宽度高度)的定位点

var saveSign //保存类型：save, saveas

var arrElments = new Array() //保存所有次选择元素（第二个开始选中的元素）

var arrDots = new Array() //保存所有次选择元素的定位点

var g_pointSelTimes = 0; //多选控件时判断第几次点击

var g_pointStartX = 0; //多选控件的起点

var g_pointStartY = 0; //多选控件的起点

var g_pointEndX = 0; //多选控件的终点

var g_pointEndY = 0; //多选控件的终点

document.onmousedown=EvtMouseDown //定义鼠标点击的事件入口

document.onmouseup=EvtMouseUp //定义鼠标放开的事件入口

document.onkeydown=EvtKeyDown //定义键盘点击的事件入口

document.onmouseover=EvtMouseOver //定义鼠标移至的事件入口

Q5: javascript 怎么判断鼠标拖动方向

原理就是通过比较鼠标的XY坐标来判断。我不知道有没有其他的方式了，就拿知道的来说。下面是实现代码。

script

var lastX = null,

lastY = null;

window.onmousemove = function(event){

var curX = event.clientX,

curY = event.clientY,

direction = '';

// console.info(event);

// console.info(event.clientX);

// console.info(event.clientY);

// 初始化坐标

if(lastX == null || lastY == null){

lastX = curX;

lastY = curY;

return ;

}

if(curX lastX){

direction += 'X右,';

}else if(curX lastX){

direction += 'X左,';

}else{

direction += 'X居中,';

}

if(curY lastY){

direction += 'Y上';

}else if(curY lastY){

direction += 'Y下';

}else{

direction += 'Y居中';

}

lastX = curX;

lastY = curY;

console.info(direction);

document.body.innerText = direction;

}

/script