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

2024-05-06 16:21:06

字體：大中小

供稿：網(wǎng)友

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

本文實(shí)例講述了JavaScript實(shí)現(xià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拖拽測試</div>

<br/><br/>

<h1>如果無效請(qǐng)刷新下頁面..</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>