javascript拖动,前端js拖拽
如何用javascript实现模块的拖动?
1、拖动层：
创新互联主要从事网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务东营区,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
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、关掉浏览器，拖动以后的层还可以留在拖动后的位置。
只需要在用户退出时，记录层的当前位置，存储于数据库中，下次用户再打开此页面时，从数据库中读取层的位置再显示。
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
javascript拖动元素时怎样防止鼠标离开被拖动的元素
你按这个思路来——onclick的是这个元素，但是onmousemove的是window窗口或document对象，再不济就HTML或body元素。
总之你让鼠标不离开元素基本不可能，这跟浏览器解析速度有关，浏览器解析速度又跟CPU有关，你不可能控制用户电脑配置不是。
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
不足是会选中文字- -！
怎么配合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 //定义鼠标移至的事件入口
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
网站栏目：javascript拖动,前端js拖拽
文章起源：http://myzitong.com/article/phegsd.html