问题遇到的现象和发生背景
dierleft() {
var divd = document.getElementById("initsju1");
// var width = divd.clientWidth || divd.offsetWidth; //边框的宽度
// console.log('fgg', width)
var divs = document.getElementById("inintIjm"); //拖拽的img
onmousedown = (ev) => {
//获取鼠标按下的坐标
var x1 = ev.clientX;
// 获取元素的left,top值
var l = divs.offsetLeft;
// 获取元素的宽度值
let width = divd.offsetWidth
// var t = divs.offsetTop;
//给可视区域添加鼠标的移动事件
document.onmousemove = function (ev) {
//获取鼠标移动时的坐标
var x2 = ev.clientX;
//计算出鼠标的移动距离
var x = x2 - x1;
var y = x2 - x1;
console.log(y, '便宜量')
//移动的数值与元素的left,top相加,得出元素的移动的距离
// var lt = y + t;
var ls = x + l;
var lst = x - y;
console.log(((lst + parseInt(width)) - lst) + x, 'width')
//更改元素的left,top值
// divs.style.top = lt + 'px';
divd.style.width = ((lst + parseInt(width)) - lst) + x + "px";
divs.style.left = ls + 'px';
// divs.style.width = lst + parseInt(width) + 'px';
}
//清除
document.onmouseup = function (ev) {
console.log('事件清楚');
document.onmousemove = null;
document.onmouseup = null;
}
}
},
问题相关代码,请勿粘贴截图
无法取消拖拽效果
我想要达到的结果
点击空白处不能实现拖拽