最简洁的js鼠标拖曳效果【原】
生活随笔
收集整理的這篇文章主要介紹了
最简洁的js鼠标拖曳效果【原】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
請原諒我是一個標題檔，不過還是很簡潔的，因為只是初步的實現(xiàn)的拖曳效果
<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<meta?http-equiv="Content-Language"?content="zh-cn"?/>
????<meta?http-equiv="X-UA-Compatible"?content="IE=EmulateIE7"?/>
????<title>DragDrop</title>
????<meta?name="author"?content="flowerszhong">
????<meta?name="date"?content="">
????<link?href=""?rel="stylesheet"?type="text/css"?/>
????<!--[if?IE]>
??????<script?type='text/javascript'?src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
??<![endif]-->
????<!--?<script?src="http://code.jquery.com/jquery-latest.js"></script>?-->
????<style?type="text/css">
????????.redBorderBox
????????{
????????????border:?2px?solid?red;
????????????position:?absolute;
????????????width:?60px;
????????????height:?60px;
????????????cursor:?move;
????????????background-color:?Red;
????????}
????</style>
</head>
<body>
????<div?id="hd">
????</div>
????<div?id="bd">
????????<div?class="redBorderBox"?id="dragObj1">
????????????i?am?not?dragObj</div>
????????<div?class="redBorderBox?dragObj"?id="dragObj2"?style="top:?90px;?left:?90px;">
????????????u?can?drag?me</div>
????</div>
????<div?id="ft">
????</div>
</body>
<script>
????/*?鼠標拖動?*/
????(function()?{
????????var?oDrag?=?"";
????????var?ox,?oy,?nx,?ny,?dy,?dx;
????????function?drag(e)?{
????????????var?e?=?e???e?:?event;
????????????oDrag?=?e.target???e.target?:?e.srcElement;
????????????if?(oDrag.className.indexOf("dragObj")?==?-1)?{?oDrag?=?""}
????????????ox?=?e.clientX;
????????????oy?=?e.clientY;
????????}
????????function?dragPro(e)?{
????????????if?(oDrag?!=?"")?{
????????????????var?e?=?e???e?:?event;
????????????????dx?=?parseInt(oDrag.style.left);
????????????????dy?=?parseInt(oDrag.style.top);
????????????????nx?=?e.clientX;
????????????????ny?=?e.clientY;
????????????????oDrag.style.left?=?(dx?+?(nx?-?ox))?+?"px";
????????????????oDrag.style.top?=?(dy?+?(ny?-?oy))?+?"px";
????????????????ox?=?nx;
????????????????oy?=?ny;
????????????}
????????}
????????document.onmousedown?=?function(e)?{?drag(e);?}
????????document.onmouseup?=?function()?{?oDrag?=?"";?}
????????document.onmousemove?=?function(event)?{?dragPro(event);?}
????})();
</script>
</html> 感謝你留言，轉(zhuǎn)載請聲明出處：http://www.cnblogs.com/flowerszhong
<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<meta?http-equiv="Content-Language"?content="zh-cn"?/>
????<meta?http-equiv="X-UA-Compatible"?content="IE=EmulateIE7"?/>
????<title>DragDrop</title>
????<meta?name="author"?content="flowerszhong">
????<meta?name="date"?content="">
????<link?href=""?rel="stylesheet"?type="text/css"?/>
????<!--[if?IE]>
??????<script?type='text/javascript'?src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
??<![endif]-->
????<!--?<script?src="http://code.jquery.com/jquery-latest.js"></script>?-->
????<style?type="text/css">
????????.redBorderBox
????????{
????????????border:?2px?solid?red;
????????????position:?absolute;
????????????width:?60px;
????????????height:?60px;
????????????cursor:?move;
????????????background-color:?Red;
????????}
????</style>
</head>
<body>
????<div?id="hd">
????</div>
????<div?id="bd">
????????<div?class="redBorderBox"?id="dragObj1">
????????????i?am?not?dragObj</div>
????????<div?class="redBorderBox?dragObj"?id="dragObj2"?style="top:?90px;?left:?90px;">
????????????u?can?drag?me</div>
????</div>
????<div?id="ft">
????</div>
</body>
<script>
????/*?鼠標拖動?*/
????(function()?{
????????var?oDrag?=?"";
????????var?ox,?oy,?nx,?ny,?dy,?dx;
????????function?drag(e)?{
????????????var?e?=?e???e?:?event;
????????????oDrag?=?e.target???e.target?:?e.srcElement;
????????????if?(oDrag.className.indexOf("dragObj")?==?-1)?{?oDrag?=?""}
????????????ox?=?e.clientX;
????????????oy?=?e.clientY;
????????}
????????function?dragPro(e)?{
????????????if?(oDrag?!=?"")?{
????????????????var?e?=?e???e?:?event;
????????????????dx?=?parseInt(oDrag.style.left);
????????????????dy?=?parseInt(oDrag.style.top);
????????????????nx?=?e.clientX;
????????????????ny?=?e.clientY;
????????????????oDrag.style.left?=?(dx?+?(nx?-?ox))?+?"px";
????????????????oDrag.style.top?=?(dy?+?(ny?-?oy))?+?"px";
????????????????ox?=?nx;
????????????????oy?=?ny;
????????????}
????????}
????????document.onmousedown?=?function(e)?{?drag(e);?}
????????document.onmouseup?=?function()?{?oDrag?=?"";?}
????????document.onmousemove?=?function(event)?{?dragPro(event);?}
????})();
</script>
</html> 感謝你留言，轉(zhuǎn)載請聲明出處：http://www.cnblogs.com/flowerszhong
轉(zhuǎn)載于:https://www.cnblogs.com/flowerszhong/archive/2011/08/16/2140491.html
總結(jié)
以上是生活随笔為你收集整理的最简洁的js鼠标拖曳效果【原】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle数据库卸载
- 下一篇： win7笔记本为手机共享wifi