JavaScript實現(xiàn)的簡單拖拽效果
更新時間:2015年06月01日 09:22:42 作者:秋風秋雨
這篇文章主要介紹了JavaScript實現(xiàn)的簡單拖拽效果,涉及javascript針對鼠標事件與頁面樣式的操作技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)的簡單拖拽效果。分享給大家供大家參考。具體實現(xiàn)方法如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript拖拽</title> <style> .test{ text-align:center; width:300px; height:30px; line-height:30px; background:#f60; position:absolute; } .test:hover{ cursor:move; } </style> </head> <body> <script src="jquery-1.6.2.min.js"></script> <div class="test">jb51拖拽測試</div> <br/><br/> <h1>如果無效請刷新下頁面..</h1> <script> ;$(function(){ var isMove=false; $(".test").mousedown(function(){isMove=true;}).mouseup(function(){isMove=false;}); $(document).mousemove(function(e){ if(!isMove){return;}; var X=e.clientX-parseInt($(".test").width()/2); var Y=e.clientY-parseInt($(".test").height()/2); $(".test").css({"left":X,"top":Y,"cursor":"move"}); }); }); </script> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- javascript 圖片放大效果函數(shù)
- 一個簡單的javascript圖片放大效果代碼
- javascript 圖片放大縮小功能實現(xiàn)代碼
- javascript完美拖拽的實現(xiàn)方法
- JavaScript圖片放大技術(shù)(放大鏡)實現(xiàn)代碼分享
- 原生javascript實現(xiàn)DIV拖拽并計算重復(fù)面積
- Javascript 拖拽的一些簡單的應(yīng)用(逐行分析代碼,讓你輕松了拖拽的原理)
- JavaScript實現(xiàn)文字與圖片拖拽效果的方法
- javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa
- javascript實現(xiàn)完美拖拽效果
- JavaScript實現(xiàn)可拖拽的拖動層Div實例
- js實現(xiàn)圖片放大和拖拽特效代碼分享
相關(guān)文章
讓插入到 innerHTML 中的 script 跑起來的實現(xiàn)代碼
在做 ajax 編程時,我們常常需要將 xmlhttp 獲取到的頁面內(nèi)容通過 innerHTML 來賦給某個容器(比如 div、span 或者 td 等),但是這里存在一個問題,就是我們將要賦給 innerHTML 的頁面內(nèi)容如果包含有腳本程序,這些腳本程序不管是外部腳本,還是內(nèi)部腳本,可能(1)都不會被執(zhí)行。2006-07-07