JavaScript实现的简单拖拽效果

2024-05-06 16:21:06

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JavaScript实现的简单拖拽效果,涉及javascript针对鼠标事件与页面样式的操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现的简单拖拽效果。分享给大家供大家参考。具体实现方法如下：

<!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>