我是靠谱客的博主 感动外套,最近开发中收集的这篇文章主要介绍javaScript小问题,托拽元素,获得当前鼠标的坐标,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

#div1,#div3
{
width: 400px;

height: 400px;

position: absolute;

left:400px;

top:100px;

border:2px solid red;

perspective: 0px;

今天希望在#div1上面添加事件
var oDiv1=document.getElementById("div1");
oDiv1.onclick=function(){
//
获取当前鼠标的位置

alert("nihao");

var clientX=document.documentElement.clientWidth;

alert(clientX);
但是怎样点击鼠标也没有弹出对话框,原因是#div1,和#div3重合了。
获取鼠标点击在屏幕上的坐标,这个地方在在div中添加的一个事件,当点击的时候会调用一个匿名的函数,而且匿名的函数也会调用getMousePos这个函数,我们需要注意的是函数的参数ev,而且这个函数返回的是一个数组,我们接受到之后就是一个数组,利用点来引用参数里面的对用的值
oDiv1.onclick=function(ev){
//
获取当前鼠标的位置

var arr=getMousePos(ev);

alert(arr.x+","+arr.y);

}
}
function getMousePos(event)
{
var e=event||window.event;

return {'x': e.clientX,'y': e.clientY};

}

这个函数的作用是实现托拽,只要我们获得标签对象调用这个函数,点击鼠标右键,就可以实现对元素的托拽
function drag(oDiv) {
oDiv.onmousedown = function (ev) {
oEve = ev || event;

var DisL = oEve.clientX - oDiv.offsetLeft;

var DisT = oEve.clientY - oDiv.offsetTop;

document.onmousemove = function (ev) {
var even = ev || event;

var L = even.clientX - DisL;

var T = even.clientY - DisT;

if (L < 0) {
L = 0;

}
//
怎样获取可视部分的宽度

else if (L > document.documentElement.clientWidth - 60) {
L = document.documentElement.clientWidth - 60;

}
if (T < 0) {
T = 0;

}
else if (T > document.documentElement.clientHeight - 60) {
T = document.documentElement.clientHeight - 60;


}
oDiv.style.left = L + "px";

oDiv.style.top = T + "px";

}
}
oDiv.onmouseup = function () {
document.onmousedown = null;

document.onmousemove = null;

}
}



最后

以上就是感动外套为你收集整理的javaScript小问题,托拽元素,获得当前鼠标的坐标的全部内容,希望文章能够帮你解决javaScript小问题,托拽元素,获得当前鼠标的坐标所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(73)

评论列表共有 0 条评论

立即
投稿
返回
顶部