JavaScript
关于DIV拖动时鼠标形状
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区DIV设置了鼠标形状为Move, 当DIV没有设置背景图片时，拖动DIV时鼠标正常，
但设置背景图片后，拖动DIV时鼠标不是Move形状了。知道为什么吗？
代码如下：
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
var isdown = false;
var beginx,beginy,endx,endy;
function down()
{
isdown = true;
beginx = event.clientX;
beginy = event.clientY;
}
function move()
{
if (isdown)
{
endx = event.clientX;
endy = event.clientY;
div1.style.left = endx-beginx;
div1.style.top = endy-beginy;
}
}
function up()
{
isdown = false;
}
//-->
</script>
</head>
<body ms_positioning="GridLayout">
<div id="div1" style="LEFT: 0px; WIDTH: 356px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 284px; BACKGROUND-COLOR: silver;BACKGROUND-IMAGE: url(file:///E:\My Documents\My Pictures\样品.jpg)"
language="javascript" onmousedown="down()" onmousemove="move()" onmouseup="up()"></div>
</body>
</html>
但设置背景图片后，拖动DIV时鼠标不是Move形状了。知道为什么吗？
代码如下：
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
var isdown = false;
var beginx,beginy,endx,endy;
function down()
{
isdown = true;
beginx = event.clientX;
beginy = event.clientY;
}
function move()
{
if (isdown)
{
endx = event.clientX;
endy = event.clientY;
div1.style.left = endx-beginx;
div1.style.top = endy-beginy;
}
}
function up()
{
isdown = false;
}
//-->
</script>
</head>
<body ms_positioning="GridLayout">
<div id="div1" style="LEFT: 0px; WIDTH: 356px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 284px; BACKGROUND-COLOR: silver;BACKGROUND-IMAGE: url(file:///E:\My Documents\My Pictures\样品.jpg)"
language="javascript" onmousedown="down()" onmousemove="move()" onmouseup="up()"></div>
</body>
</html>
...全文
相关推荐
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
鼠标样式（光标）的调整：在被拖动div上方的div（moveBar）设置了光标样式为move，当用户将鼠标移动到该区域时，光标变为十字形状，提示用户该区域是可以拖动的。10.
div拖拽效果
样式部分定义了一个类名为`.drag`的div，设置了边框、宽度、高度、光标形状以及绝对定位。`cursor: move;`使得当鼠标指针位于div上时，光标变为移动手形，提示用户可以拖动该元素。
关联div 拖动大小demo
**优化用户体验**： - 限制div的最小和最大尺寸，以避免意外的负值或过大尺寸。 - 添加视觉反馈，如改变鼠标形状（通常为双向箭头），以提示用户可以拖动。
js拖动div并拖动DIV的大小
**优化用户体验**： 添加视觉反馈，如鼠标形状改变，以指示当前的拖放或调整大小状态。同时，确保在拖放过程中其他交互元素不受影响。
可以拖动的DIV
标题中的“可以拖动的DIV”指的是在网页开发中实现的一个功能，允许用户通过鼠标拖动来改变HTML中<div>元素的位置。
