1.javascript获取当前鼠标坐标方法:
var oDiv=document.getElementById('id名称');
oMark.οnmοusemοve=function (ev)
{
var oEvent=ev||event; //这里可得到鼠标X坐标
alert(oEvent.clientX); //这里可以得到鼠标Y坐标
alert(oEvent.clientY);
}
2.jQuery获取当前鼠标坐标方法:
<div οnmοuseοver="test(event)"></div>
function test(e){
//这里可得到鼠标X坐标
var pointX = e.pageX;
//这里可以得到鼠标Y坐标
var pointY = e.pageY;
}
使用js/jQuery的拖动效果
offsetLeft,offsetTop是指距离父元素的距离,针对DOM对象
offset().left,offset().top是指距离document的距离,针对Jquery对象
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
<script>
var draggingObj=null;
var diffX=0;
var diffY=0;
function down(e){
if(e.target.className.indexOf("dialog-title")!=-1){
draggingObj=e.target.offsetParent;
diffX=event.clientX-draggingObj.offsetLeft;
diffY=event.clientY-draggingObj.offsetTop;
flag=true;
}
}
function move(e){
var dialog=document.getElementById('dlgTest');
if(draggingObj)
{
dialog.style.left=e.clientX-diffX+"px";
dialog.style.top=e.clientY-diffY+"px";}
}
function up(){
draggingObj=null;
diffX=0;
diffY=0;
}
document.addEventListener("mousedown",down);
document.addEventListener("mouseup",up);
document.addEventListener("mousemove",move);
</script>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
<span style="white-space:pre"> </span><script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
<span style="white-space:pre"> </span> var flag=false;
<span style="white-space:pre"> </span> var xx=0,yy=0;
<span style="white-space:pre"> </span> $(".dialog-title").mousedown(function(e){
<span style="white-space:pre"> </span> xx=e.pageX-$("#dlgTest").offset().left;
<span style="white-space:pre"> </span> yy=e.pageY-$("#dlgTest").offset().top;<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span> flag=true;
<span style="white-space:pre"> </span> });
<span style="white-space:pre"> </span> $(document).mousemove(function(e) {
if (flag) {
var e = e || window.event;
var oX = e.pageX - xx;
var oY = e.pageY - yy;
<span style="white-space:pre"> </span>console.log(xx+","+yy);
$("#dlgTest").css({"left":oX -10+ "px", "top":oY -10+ "px"});
}
});
$(document).mouseup(function(e) {
flag = false;
<span style="white-space:pre"> </span>
})
<span style="white-space:pre"> </span> })
</script>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
</body>
</html>