JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果

更新時(shí)間：2015年06月01日 09:22:42 作者：秋風(fēng)秋雨

這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果,涉及javascript針對(duì)鼠標(biāo)事件與頁(yè)面樣式的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果。分享給大家供大家參考。具體實(shí)現(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拖拽測(cè)試</div>
<br/><br/>
<h1>如果無(wú)效請(qǐng)刷新下頁(yè)面..</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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

你不知道的前端console用法分享
console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會(huì)在控制臺(tái)輸出一些有意思的東西,下面這篇文章主要給大家介紹了關(guān)于前端console用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
前端面試知識(shí)點(diǎn)錦集（JavaScript篇）
這篇文章主要為大家分享了前端面試知識(shí)點(diǎn)錦集JavaScript篇，細(xì)致的給出了每個(gè)js面試知識(shí)點(diǎn)的答案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
詳解JavaScript引擎V8執(zhí)行流程
本文主要講解的是V8的技術(shù)，是V8的入門篇，主要目的是了解V8的內(nèi)部機(jī)制，希望對(duì)前端，快應(yīng)用，瀏覽器，以及nodejs同學(xué)有些幫助。這里不涉及到如何編寫優(yōu)秀的前端，只是對(duì)JS內(nèi)部引擎技術(shù)的講解
2021-06-06
JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán)實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán),涉及javascript數(shù)學(xué)運(yùn)算及頁(yè)面樣式動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
javascript 模式設(shè)計(jì)之工廠模式詳細(xì)說(shuō)明
2010-05-05
前端使用crypto.js進(jìn)行加密的函數(shù)代碼
最近在使用Cookies加密保存數(shù)據(jù)的時(shí)候，接觸到crypto，使用還算簡(jiǎn)單，在這里記錄一下
2020-08-08
uniapp實(shí)現(xiàn)左右聯(lián)動(dòng)商品分類頁(yè)面
一個(gè)電商的app,商品的展示是必不可少的,聯(lián)動(dòng)分類展示是很常見(jiàn)的,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)左右聯(lián)動(dòng)商品分類頁(yè)面的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
JS常見(jiàn)算法詳解
本文主要介紹了前端常見(jiàn)算法的JS實(shí)現(xiàn)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
js數(shù)字舍入誤差以及解決方法(必看篇)
下面小編就為大家?guī)?lái)一篇js數(shù)字舍入誤差以及解決方法(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
javascript實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉菜單的方法,通過(guò)javascript自定義函數(shù)實(shí)現(xiàn)對(duì)多級(jí)聯(lián)動(dòng)下拉菜單的操作,是非常實(shí)用的技巧,需要的朋友可以參考下
2015-02-02