快捷導(dǎo)航

JavaScript實現(xiàn)的簡單拖拽效果

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

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

本文實例講述了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è)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

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