鼠标的指针在网页中正常情况下是默认为左上角指针样式如图：
现在，网页中有一个可移动DIV，在可移动DIV上，按下鼠标左键并拖动，拖动过程中鼠标就由原来的左上角指针样式（cursor:default）变成了文本输入样式（cursor:text）如图：
我想要的效果是：在可移动DIV上，按下鼠标左键并拖动,拖动过程中鼠标仍然是左上角指针样式（cursor:default）
，而不是文本输入样式（cursor:text）。
请问，这需要用到JS吗？具体应该如何达到这种效果叻？
-
等级
本版专家分：0结帖率 100% -
鼠标的指针在网页中正常情况下是默认为左上角指针样式如图：
现在，网页中有一个可移动DIV，在可移动DIV上，按下鼠标左键并拖动，拖动过程中鼠标就由原来的左上角指针样式（cursor:default）变成了文本输入样式（cursor:text）如图：
我想要的效果是：在可移动DIV上，按下鼠标左键并拖动,拖动过程中鼠标仍然是左上角指针样式（cursor:default），而不是文本输入样式（cursor:text）
。
请问，这需要用到JS吗？具体应该如何达到这种效果叻？
展开阅读全文
-
等级
本版专家分：17033勋章
-
- 红花 2012年8月 .NET技术大版内专家分月排行榜第一
-
-
黄花
2014年5月 Web 开发大版内专家分月排行榜第二
2014年4月 Web 开发大版内专家分月排行榜第二
-
-
蓝花
2014年3月 Web 开发大版内专家分月排行榜第三
2014年2月 Web 开发大版内专家分月排行榜第三
2013年7月 .NET技术大版内专家分月排行榜第三
2013年6月 .NET技术大版内专家分月排行榜第三
2012年9月 .NET技术大版内专家分月排行榜第三
-
-
在IE 火狐下，应该是没有问题的 Chrome 浏览器 下会存在你所描述的问题
阻止下默认事件
document.onselectstart = function(){return false;};
示例代码如下
<!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>无标题文档</title>
<style>
.move{width:200px;height:200px;background:red;position:absolute;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementsByTagName('div')[0];
document.onselectstart = function(){return false;};
oDiv.onmousedown=function(ev)
{
var ev=ev||window.event;
var iLeft=this.offsetLeft;
var iTop=this.offsetTop;
var mouseX=ev.clientX;
var mouseY=ev.clientY;
document.onmousemove=function(ev)
{
var ev=ev||window.event;
oDiv.style.left=iLeft+ev.clientX-mouseX+'px';
oDiv.style.top=iTop+ev.clientY-mouseY+'px';
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</head>
<body>
<div class="move"></div>
</body>
</html>
- 拖拽改变鼠标样式
在使用ant-design-vue的tree组件的时候，需要拖拽树的子节点到地图组件上，但是一旦超出tree的盒子范围鼠标样式会不对，是一个圆圈加/的鼠标样式，这个鼠标样式给用户传达的信息是不可拖拽，因此要改变鼠标样式 ...
- css中cursor鼠标指针鼠标光标样式最最完整的教程
Css cursor鼠标指针鼠标光标样式教程 可能的值 值 描述 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 ...
- 【JavaScript】拖动事件，鼠标拖动元素出现默认样式原因及解决方法，进度条拖动样式，拖动对象dataTransfer...
在制作进度条的时候，想要制作一个进度条的拖动样式，所以我给他注册了拖动事件drag，然后虽然可以拖拽产生相应的变化但是会出现一个禁止的标志 解决这个问题先要分析一些拖拽事件： 拖动事件 这里说一下拖动事件： ...
- css鼠标指针光标样式_指针姐妹：使用CSS更改浏览器的光标
css鼠标指针光标样式While the browser will automatically change the appearance of the cursor in the context of many UI elements - switching it to a pointing hand when over links, for example - there ...
- jQuery实现自由拖动DIV插件
实现简单Div的拖动效果，主要分为三步。 1，需要拖动的Div拖动绑定，mousedown事件，...2，绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用实现拖动区域的Div上绑定事件，而不用DIV元素的事件 ，mou
- 前端学习记录11-CSS-(元素隐藏，鼠标样式，轮廓线，拖拽)
鼠标样式，轮廓线，拖拽元素隐藏display(设置或检索对象是否以及如何显示)visibility(可见性)overflow(溢出or滚动条)使用隐藏来制作网页鼠标悬停出现播放按钮效果cursor(鼠标样式)outline(轮廓线)resize(拖拽元素) ...
- 把a标签设置为不可点击，鼠标放上去让div变成小手样式
把a标签设置为不可点击 <div style="pointer-events: none;"> <a href="www.baidu.com">百度一下</a> </div> 給div添加了pointer-events: ...鼠标放上去让div变成小手样式 cursor...
- 实现图层拖拽 捕获鼠标信息
在网页上实现拖拽其实不难，第一我们需要知道鼠标的位置，第二我们需要知道当用户点击一个网页元素时这个元素要能够拖拽。 获取鼠标移动信息 <br />开始我们需要获取鼠标的坐标．我们添加一个...
- 用画布实现 鼠标绘制可拖动 可改变大小矩形框
实现原理的话和一般的鼠标拖动绘制矩形框(用div实现)原理差不多，计算鼠标的坐标点来减去画布距离网页窗口最左边以及最上边的距离 以此为基点 改变矩形框的大小，不同的是 这里每帧都要把画布清空以及重绘 这样最终...
- jQuery实现拖动改变div大小功能
通过jQuery实现用户自定义div尺寸功能 ...当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨
- H5 drag拖拽移动小结及示例
drag api是h5中的新功能，用来拖拽页面元素挺有用的，先小结一下 首先，基本概念 声明，概念部分我是借鉴这篇文章 https://www.cnblogs.com/wuya16/p/DragApi.html 想让一个元素能拖动，需要在html中添加属性 ...
- 关于点击出现弹窗，遮罩层鼠标拖拽的练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义弹出框&... width: 2000p
- 可拖动div（2）
今天学了另一中可拖动div，比之前的代码少，用起来简单，并且加入样式，看起来更像一个弹出框，当然了，颜色如果不喜欢可以再调。复制进去，尝试一下就知道啦。这种方式可以套用到很多div。<!DOCTYPE ...
- div拖拽
div拖拽 …………………………………………………………………………………………………………… ...最近呢在DN上学习到了一个新的知识——div拖拽，如下图，在页面上把div水平拖拽离开原来的位置，这个究...
- ElectronVue系列 -- 4.左右拖拽div侧边栏，调整区域大小
如下，一分为三，想要可以拖拽，调整左、中、右大小 话不多说，直接上代码 代码示例 HTML代码 其实是5个div，拖拽区域也是div，只不过就是窄一点 <template> <div id="hello-id"> <div id="left-...
- 遮罩层的拖拽效果
遮罩层的拖拽效果 开发工具与关键技术：Adobe Dreamweaver CC 2018 // jquery3.21.min.js 作者：李德新 撰写时间：2019年01月 31日 jquery插件是我们学习IT技术必须学会的使用的技术，而js代码也是非常重要的，...
- css 更改鼠标为手状样式
在自行设置的div或者其他标签中，为了更好的体验效果，会将在滑动过程中，将鼠标变为手势 简单总结下css对应的样式。 所在的div中，添加cursor:pointer即可。 示例：
- CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
- Windows中多指针输入技术的实现与应用(4多鼠标输入的底层实现)
此技术最先由M.Westergaard在[9]中提出，此技术主要思路为从驱动程序层面解决Windows本身不能识别多个指针设备的问题。通过设计单独的一套鼠标驱动程序和 API完成硬件与用户层应用程序的通信。主要的技术可以用图2.1...
- 使用ControlToolkit中的控件实现用鼠标拖动
本文来自我即将出版的《ASP.NET AJAX程序设计 第I卷 服务器端ASP.NET AJAX Extensions与ASP.NET AJAX ... 10.4 ReorderList：用鼠标拖动改变条目顺序 ASP.NET AJAX Control Toolkit中的ReorderList控件将在页面中呈现出
- 2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题，后期会对于单个知识点再说笔记详细讲解。 ...
- javascript 根据下拉框选择显示不同的DIV
原文地址： http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中，我们介绍了两类JavaScript小工具及其源码：浮动文本和弹出菜单。本文中，我们将继续介绍另外几个...
- js自定义鼠标框选事件,并解决页面浮动鼠标变位情况
有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学...
- 使用ASP.NET AJAX Control Toolkit中的ReorderList控件实现用鼠标拖动改变条目顺序
本文来自我即将出版的《ASP.NET AJAX程序设计 第I卷 服务器端ASP.NET AJAX Extensions与ASP.NET ... 10.4 ReorderList：用鼠标拖动改变条目顺序 ASP.NET AJAX Control Toolkit中的ReorderList控件将在页面中呈现出一...
- antd-modal 替代品 可拖动弹窗组件
1、ModalWin.js import React from 'react'; import {Button, Icon} from 'antd'; import PropTypes from 'prop-types'; import styles from './styles.less'; class ModalWin extends React.......
- 前端开发者的福音！通过拖拽就可生成Vue代码的平台来了！
开发者可在此基础上进行二次开发。 目前该平台非常适合快速搭建一个常见的数据查询组件，仅需要拖三个组件进来即可完成，例如: 界面及操作介绍 主界面主要分为三块区域: 组件库区域，组件库区域主要用于选择组件...
- Dreamweaver及网页设计常见问题 365个
在浏览网页时，鼠标停留在图片对象或链接上，在鼠标的右下方有时会出现一个提示信息框，对目标进行一定的注释说明。对于某些场合，它的作用是很重要的。选中图片对象，在属性面板里会出现一个“替换”文本框。默认...
- css cursor 鼠标手势
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 默认值： auto 继承： yes 版本： CSS2 JavaScript 语法： object.style.cursor="crosshair
- 精通C语言指针
指针被誉为C语言的精髓、C本质上是加了一层语法糖的汇编，引进当时先进的函数，保留了汇编强大的地址直接访问功能 —— 指针，使其高效灵活。本课程是黄强老师对于指针的一次专题讲解，相信能给大家带来收获！ a:0:{}
- Autojs 例子 源码 1600多个教程源码
autojs例子大全，一千六百多个脚本,简单的到复杂的例子，统统有，小白学完马上变大神，大神学了变超神。 脚本内容包含： 几十种类型的UI脚本，抖音、QQ、微信、陌陌、支付宝等自动化操作的脚本、还有部分协议列表，HTTP协议(POST、GET)上传下载，接码模块，百度文字识别api模块，文件操作模块：txt文本读一行删一行，等等其他例子