php拖拽原理,JavaScript_javascript实现完美拖拽效果，拖拽的原理 1.获取距离(鼠标 - phpStudy...

javascript实现完美拖拽效果

拖拽的原理

1.获取距离(鼠标的位置-odiv的外边距)

2.理解什么时候用onmousemove事件

3.判断是否过界

html代码：

css代码：

#div1{width:100px;height:100px;background:red;position:absolute}

javascript代码：

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var x=0;

var y=0;

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

//鼠标的横坐标减去div的offsetLeft

x=oEvent.clientX-oDiv.offsetLeft;

//鼠标的纵坐标减去div的offsetTop

y=oEvent.clientY-oDiv.offsetTop;

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

var left=oEvent.clientX-x;

var right=oEvent.clientY-y;

//判断左边是否过界

if(left<0){

left=0;

}

//判断右边是否过界

else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){

left=document.documentElement.clientWidth-oDiv.offsetWidth;

}

//判断上边是否过界

if(right<0){

right=0;

}

//判断下边是否过界

else if(right>document.documentElenment.clientHeight){

right=document.documentElenment.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=left+"px";

oDiv.style.top=right+"px";

}

document.οnmοuseup=function(){

//清空document的事件

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

//解决低版本火狐bug，干掉系统默认

return false;

}

}

以上所述就是本文的全部内容了，希望大家能够喜欢。相关阅读:

C#中winform控制textbox输入只能为数字的方法

C++中的extern “C”用法详解

jQuery中outerWidth()方法用法实例

JavaScript实现的浮动层框架用法实例分析

Android ListView获得选项中的值

Java数组模拟优先级队列数据结构的实例

php反射应用示例

Java 并发编程学习笔记之Synchronized底层优化

div实现阴影边框效果(适应各主流浏览器)

基于JavaScript实现移动端点击图片查看大图点击大图隐藏

C#事务处理(Execute Transaction)实例解析

asp.net CheckBoxList各项最小宽度CSS样式(兼容性good)

MySql数据分区操作之新增分区操作

php实现的单一入口应用程序实例分析