<div class="img-box" v-if="curPicObject" @click.stop>
<img class="img" :src="curPicObject.imageUrl" alt="" style="width: 100%">
<div class="v-move"
v-if="curPicObject && curPicObject.goodsTagList"
v-for="(labelItem,cIndex) in curPicObject.goodsTagList" :key="cIndex"
:style="{left:labelItem.position.left+'px',top:labelItem.position.top+'px'}"
@mousedown.stop="function (e){dragDown(e, cIndex)}">
<div class="pointer"></div>
<div class="wire"></div>
<div class="box" @click.stop="editProTag(cIndex)">
{{labelItem.goodsTagTitle}} <i class="el-icon-error"
@click.stop="deleteProLabel(cIndex)"></i>
</div>
</div>
</div>
public dragDown(e,index){
console.log(e,index);
let me =this;
let firstTime = 0;
let lastTime = 0;
let targetNode , parentNode;
this.clickKeyFlag = false;
if (e.target.parentElement.classList.contains('v-move')){
targetNode = e.target.parentElement;
parentNode = targetNode.parentElement;
}else if (e.target.classList.contains('v-move')){
targetNode = e.target;
parentNode = targetNode.parentElement;
}else{
return false;
}
let dragObj = {
targetBox : targetNode,
parentBox : parentNode,
dragging : false,
boxX : 0,
boxY : 0,
mouseX : 0,
mouseY : 0,
offsetX : 0,
offsetY : 0,
init(e){
// 鼠标按下的动作
dragObj.down(e);
// 鼠标的移动动作
document.onmousemove = dragObj.move;
// 释放鼠标的动作
document.onmouseup = dragObj.up;
},
down(e){
firstTime = new Date().getTime();
console.log(me.clickKeyFlag,"---down");
dragObj.dragging = true;
// 获取元素所在的坐标
dragObj.boxX = dragObj.targetBox.offsetLeft;
dragObj.boxY = dragObj.targetBox.offsetTop;
// 获取鼠标所在的坐标
dragObj.mouseX = Math.floor(dragObj.getMouseXY(e).x);
// noinspection JSSuspiciousNameCombination
dragObj.mouseY = Math.floor(dragObj.getMouseXY(e).y);
// 鼠标相对元素左和上边缘的坐标
dragObj.offsetX = dragObj.mouseX - dragObj.boxX;
dragObj.offsetY = dragObj.mouseY - dragObj.boxY
},
up(e){
//解决mousedown 和 click 冲突
lastTime = new Date().getTime();
if((lastTime - firstTime) < 300){
console.log(me.clickKeyFlag,"---up");
me.clickKeyFlag = true;
}
dragObj.dragging = false
},
move(e){
if (dragObj.dragging) {
// 获取移动后的元素的坐标
let x = dragObj.getMouseXY(e).x - dragObj.offsetX;
let y = dragObj.getMouseXY(e).y - dragObj.offsetY;
// 计算可移动位置的大小, 保证元素不会超过可移动范围
// 此处就是父元素的宽度减去子元素宽度
let width = dragObj.parentBox.clientWidth - dragObj.targetBox.offsetWidth;
let height = dragObj.parentBox.clientHeight - dragObj.targetBox.offsetHeight;
// min方法保证不会超过右边界,max保证不会超过左边界
x = Math.min(Math.max(0, x), width);
y = Math.min(Math.max(0, y), height);
// 给元素及时定位
dragObj.targetBox.style.left = x + 'px';
dragObj.targetBox.style.top = y + 'px';
// @ts-ignore
me.curPicObject.goodsTagList[index].position = {editPhoneWidth:375,left:x, top:y};
me.curPicObject.goodsTagList.splice(index, 1,me.curPicObject.goodsTagList[index]);
// me.curPicObject = Object.assign({},me.curPicObject);
me.qiKanInfo.qiKanImgUrls.splice(me.curPicIndex,1,me.curPicObject);
console.log(x, y);
}
},
getMouseXY(e){
let x = 0, y = 0;
e = e || window.event;
if (e.pageX) {
x = e.pageX;
y = e.pageY
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
y = e.clientY + document.body.scrollTop - document.body.clientTop
}
return {
x: x,
y: y
}
}
};
dragObj.init(e);
}