<!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)文章

js精確的加減乘除實(shí)例
下面小編就為大家?guī)?lái)一篇js精確的加減乘除實(shí)例，具有非常好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
javascript中caller和callee詳解
有些小伙伴可能會(huì)問(wèn)caller,callee 是什么?在javascript 中有什么樣的作用?那么本篇會(huì)對(duì)于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。
2015-08-08
讓插入到 innerHTML 中的 script 跑起來(lái)的實(shí)現(xiàn)代碼
在做 ajax 編程時(shí)，我們常常需要將 xmlhttp 獲取到的頁(yè)面內(nèi)容通過(guò) innerHTML 來(lái)賦給某個(gè)容器（比如 div、span 或者 td 等），但是這里存在一個(gè)問(wèn)題，就是我們將要賦給 innerHTML 的頁(yè)面內(nèi)容如果包含有腳本程序，這些腳本程序不管是外部腳本，還是內(nèi)部腳本，可能(1)都不會(huì)被執(zhí)行。
2006-07-07
JavaScript制作簡(jiǎn)易計(jì)算器（不用eval）
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)易計(jì)算器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
js定時(shí)器+簡(jiǎn)單的動(dòng)畫效果實(shí)例
下面小編就為大家?guī)?lái)一篇js定時(shí)器+簡(jiǎn)單的動(dòng)畫效果實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
初步使用bootstrap快速創(chuàng)建頁(yè)面
初步嘗試使用Express搭建了一個(gè)Web框架，那么接下來(lái)就是要在該框架下寫上自己的頁(yè)面，快速創(chuàng)建頁(yè)面這里選擇了bootstrap前端框架，通過(guò)它即使你不太懂前端設(shè)計(jì)，寫出來(lái)的頁(yè)面也不會(huì)太難看，感興趣的小伙伴們可以參考一下
2016-03-03
JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
js 程序執(zhí)行與順序?qū)崿F(xiàn)詳解
JavaScript是一種描述型腳本語(yǔ)言，由瀏覽器進(jìn)行動(dòng)態(tài)的解析與執(zhí)行，瀏覽器對(duì)于不同的方式有不同的解析順序，詳細(xì)介紹如下，感興趣的朋友可以參考下哈
2013-05-05
JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-06-06
Javascript如何理解全國(guó)甲卷高考作文
這篇文章主要介紹了Javascript如何理解全國(guó)甲卷高考作文,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06