js拖动效果怎么实现

JavaScript032

js拖动效果怎么实现,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>鼠标拖动</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<script language="JavaScript" type="text/javascript">

var drag_=false

var D=new Function('obj','return document.getElementById(obj)')

var oevent=new Function('e','if (!e) e = window.eventreturn e')

function Move_obj(obj){

var x,y

D(obj).onmousedown=function(e){

drag_=true

with(this){

style.position="absolute"var temp1=offsetLeftvar temp2=offsetTop

x=oevent(e).clientXy=oevent(e).clientY

document.onmousemove=function(e){

if(!drag_)return false

with(this){

style.left=temp1+oevent(e).clientX-x+"px"

style.top=temp2+oevent(e).clientY-y+"px"

}

}

}

document.onmouseup=new Function("drag_=false")

}

}

</script>

<body>

<div id="drag" style="background-color:#0066CCwidth:280pxheight:160pxpadding:20pxborder:1px #003399 solidfont-size:10.5ptcolor:white" onmouseover='Move_obj("drag")'>

<p>这个层是可以拖动的，而且还可以吸附鼠标，试试看！</p>

<p>/</p>

</div>

</body>

</html>

obj可以设为全局变量，这个没问题。但是 window.event 是事件对象，在每个事件触发后的过程里，这个对象都是各不相同的（也就是说div.onmousedown中的event对象和div.onmousemove中的event对象不是同一个！），所以不能把它在事件过程外赋值给一个全局变量，因为到了事件过程中它是无效的！必须在事件过程中实时赋值才行！

最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，类似如下图这样：

原文地址 http://www.cnblogs.com/tnnyang/p/7073723.html