Vue img 是用来 鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来，新网页显示这个图标，请教
**这段代码有两个问题：
1\这 change-col-w类加了hover 显示 下面的img, 第一个td 不起作用（更改一次列宽后），第二个至最后，Hover 有效
第一个TD 拖动了更改一次列宽后 Hover就失效了，后面的 TD hover 一直有效
2\ img 是鼠标拖动用的图标, 但拖动 图标 就 拉出一个新网页面来，新网页显示这个图标**
<!-- 列号 ------------------------->
<td v-for="(i, index) in tableJson.cols" :key="index">
// 这个 change-col-w类加了hover 显示 下面的img DOM
<div class="change-col-w" @mousedown.left="changeColWidth($event, index)">
// 这img 是用来鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来，新网页显示这个图标，
<img src='../../assets/img/changeCOL.svg' class="v-line-svg" />
</div>
</td>
这个图标是随鼠标 列宽 一同移动的.
但一不心 就把这个图标拉出一个新网页出来
补充一下js
// 拖动改变列宽
let initPointX = 0, initPointY = 0, initLine = 0, vLine: HTMLDivElement, initWidth: number, colNumber: number
let moveWidth = 0, moveHeight = 0, colSVG: HTMLImageElement, crrCOL: HTMLTableCellElement
function changeColWidth(event: any, index: number) {
console.log(event)
colNumber = index // 当前列号
const form_table = document.getElementById('form_table') as HTMLTableElement
colSVG = form_table.querySelector('.v-line-svg') as HTMLImageElement // SVG图标
crrCOL = form_table.querySelectorAll('.col-letter')[index] as HTMLTableCellElement // 当前列 TD dom
vLine = form_table.querySelector('.v-line') as HTMLDivElement // 竖线
initLine = crrCOL.offsetLeft + crrCOL.offsetWidth - 0.5 // 竖线出现的位置
initWidth = crrCOL.offsetWidth // 当前列初始宽度
initPointX = event.clientX // x初始位置
initPointY = event.clientY // Y初始位置
vLine.style.visibility = 'visible' // 竖线显示
vLine.style.height = (ref_table.value as HTMLTableElement).offsetHeight + 'px'
vLine.style.left = initLine + 'px'
document.addEventListener("mousemove", colWidthMousemove) //监听鼠标移动事件
document.addEventListener("mouseup", colWidthMouseup) //监听鼠标抬起事件
}
function colWidthMousemove(event: any) {
updateCellRange(sDOM, eDOM) // 更新选择框的大小
moveWidth = event.clientX - initPointX // 移动的距离
moveHeight = event.clientY - initPointY
vLine.style.left = initLine + moveWidth + 'px'
colSVG.style.top = 8 + moveHeight + 'px' // 上下位置随鼠标称动变化
console.log('鼠标水平移动的距离', moveWidth)
if ((initWidth + moveWidth) < 20) {
tableJson.value.cols[colNumber] = 20
} else {
tableJson.value.cols[colNumber] = initWidth + moveWidth
}
}
// 扡动列宽图标div
.change-col-w {
position: absolute;
background-color: green;
width: 8px;
height: 24px;
top: 0px;
right: -3px;
z-index: 1;
// pointer-events: none;
}
.v-line-svg {
position: absolute;
display: none;
width: 20px;
top: 0;
left: 0;
z-index: 1;
user-select: none;
-webkit-user-drag: none;
// background-image: url('../../assets/img/changeCOL.svg');
}
}
.change-col-w:hover>.v-line-svg {
display: block;
left: -4px;
top: 8px;
-webkit-user-drag: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
.change-col-w {
border: 1px solid #f00;
width: 100px;
height: 100px;
}
.change-col-w:hover .v-line-svg {
display: inline-block
}
.v-line-svg {
width: 100px;
height: 100px;
display: none;
-webkit-user-drag: none;
}
</style>
</head>
<body>
<div id="app">
<table>
<td v-for="(i, index) in tableJson.cols" :key="index">
<!-- // 这个 change-col-w类加了hover 显示 下面的img DOM -->
<div class="change-col-w" @mousedown.left="changeColWidth($event, index)">
<!-- // 这img 是用来鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来，新网页显示这个图标， -->
<img src='./R-C.jpg' class="v-line-svg" />
</div>
</td>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
tableJson: {
cols: [1, 2, 3, 4]
}
};
},
methods: {
changeColWidth(e, index) {
console.log(e, index);
}
},
mounted() {
}
})
</script>
</body>
</html>
禁止页面中的文本和图标等内容随着鼠标拖动被选中
body, img {
/* 禁止文本图标被鼠标拖动选中 */
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
/* 设置图片不可拖动*/
-moz-user-drag: none; /*火狐*/
-webkit-user-drag: none; /*webkit浏览器*/
-ms-user-drag: none; /*IE10*/
-khtml-user-drag: none; /*早期浏览器*/
user-drag: none;
}
从这个代码看不出什么问题，从你的表述来看，第一个问题应该出在你的js代码上，第二个问题，如果你是点了图标按住图标，然后拖动鼠标，然后松开鼠标按键，是会打开新页面并显示该图片的，如果你不是点了图标按住图标，拖动后松开按键的话，那也可能是的js的事件有问题了，第一个问题，你要贴出相关代码才能确定代码哪里有问题，第二个问题需要你自己确定是哪种操作，才可以确定问题出在哪
查看一下事件的时候有没判断阻挡拖动事件的发生
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632