JS 拖拽窗口的实现

爱被打了一巴掌 2022-09-11 02:28 237阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd3dmMTIyNQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

<!DOCTYPE html>

<html lang="en">

<head>

<title>Document</title>

</head>

.all \{

height: 300px;

width: 450px;

border: 2px solid black;

position: absolute;

.top \{

height: 20%;

width: 100%;

background: pink;

.a \{

height: 100%;

width: 100%;

border: 1px solid blue;

</style>

function getClassName(clsName, Parent) \{

var Parent = Parent ? document.getElementById(Parent) : document,

eles = \[\],

elements = Parent.getElementsByTagName("\*");

for (var i = 0; i < elements.length; i++) \{

if (clsName == elements\[i\].className) \{

eles.push(elements\[i\]);

return eles;

window.onload = drag;

function drag() \{

//获取className=top的对象

var pannel = getClassName("top", "all")\[0\];

//当鼠标点击时触发

alert(pannel.innerHTML);

document.title = "111";

pannel.onmousedown = fndrag;

function fndrag(event) \{

document.title = "222";

var all = document.getElementById("all");

var pannel = getClassName("top", "all")\[0\];

var event = event || window.event;

//获取鼠标距离窗口的位置

var disX = event.clientX - all.offsetLeft;

var disY = event.clientY - all.offsetTop;

//鼠标移动

document.onmousemove = function (event) \{

var e = event || window.event;

pannel.style.cursor = "move";

fnmove(e, disX, disY);

//放开鼠标

document.onmouseup = function () \{

document.onmouseup = null;

document.onmousemove = null;

pannel.style.cursor = "auto";

function fnmove(e, disX, disY) \{

//获取窗口的位置（左上角）

var l = e.clientX - disX;

var t = e.clientY - disY;

var all = document.getElementById("all");

//获取可视窗口的长宽，兼容浏览器

var winWid = document.documentElement.clientWidth || document.body.clientWidth;

var winHei = document.documentElement.clientHeight || document.body.clientHeight;

//获取窗口的最大宽度和长度（左上角）

var maxWid = winWid - all.offsetWidth - 10;

var maxHei = winHei - all.offsetHeight - 10;

//超出左边间距

if (l < 0) \{

l = 10;

//超出右边间距

else if (l > maxWid) \{

l = maxWid;

//超出上面距离

if (t < 0) \{

t = 10;

else if (t > maxHei) \{

t = maxHei;

document.title = l + "," + t;

all.style.left = l + "px";

all.style.top = t + "px";

</script>

<body>

<div class="a">

<div id="all" class="all">

<div class="top">鼠标点击区域</div>

</div>

</body>

</html>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd3dmMTIyNQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d534e8205fa44ea59fba43361fd3f099.png

JS 拖拽窗口的实现

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关原生JS实现窗口拖拽效果

相关 js实现拖拽排序

相关 JS实现窗口拖拽

相关 js拖拽

相关 JS 拖拽窗口的实现

相关 js实现拖拽事件

相关 JS 拖拽

相关 JS代码实现拖拽（拖拽三剑客）

相关 QT 学习之窗口拖拽实现

相关原生js实现拖拽功能