鼠标拖动图片，并将数据定位到图片位置中

<div class="relative">
    <div class="big-add" id="myImage"></div>
	<div class="point" id="point"></div>
</div>

 css样式根据需求设置

<style>
.relative {
    position: relative;
}

.big-add {
    background: url('./images/xz.jpg') no-repeat center / 100% 100%;  
    z-index: 0;
    height: 3000px;
	width: 4000px;
	position: relative;
	overflow: hidden;
	transform: translate(-396px, -982px);
}

.point {
    position: absolute;
    z-index: 9;
    left: 2%;
    top: 2%;
    display: flex;
    width: 600px;
    flex-wrap: wrap;
}

.wab {
    width: max-content;
    height: max-content;
    line-height: 2;
    font-size: 16px;
    font-weight: bold;
    cursor: move;
    background: #0a83ae;
    color: white;
    border-radius: 5px;
    border: 2px solid;
    padding: 5px 10px;
    margin: 6px;
}

.big-nr {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    background: #0a83ae;
    color: white;
    border-radius: 5px;
    border: 2px solid;
    line-height: 2;
    padding: 5px 10px;
}
</style>

 在JavaScript中获取元素id，并添加监听事件

1.获取图片背景，添加鼠标监听事件，完成背景图拖动；

2.获取需要定位数据（可动态获取，需要注意异步情况）

3.使用dom将加载到页面中，这里使用了draggable属性

4.使用draggable监听（dragstart、dragover、drop）完成数据拖拽，可以将拖拽后的定位数据赋值给原数据

var img = document.getElementById("myImage"); //获取背景图片id
var point = document.getElementById("point");

var list=[ //要定位的数据，可以动态获取
    {name:"数据1",id:1,mapPoint:""},
	{name:"数据2",id:2,mapPoint:""},
	{name:"数据3",id:3,mapPoint:""},
]
var positionX, positionY, initialX = 396, initialY = 982, isDragging = false, isdow = false;

// 为背景图添加鼠标移动事件监听器
var addre = point.getElementsByClassName("wab") 
var addName = img.getElementsByClassName("big-nr")
img.addEventListener('mousedown', function (event) {//在鼠标按下
	event.preventDefault();//阻止默认行为
	positionX = event.clientX + initialX;
	positionY = event.clientY + initialY;
	isDragging = true
});

img.addEventListener('mousemove', function (event) {//鼠标移动

//阻止默认行为
event.preventDefault();
    if (isDragging) {
		initialX = positionX - event.clientX;
		initialY = positionY - event.clientY;
		if (initialX < 0 && initialX > 4287) initialX = 0;
		if (initialY < 0 && initialY > 4950) initialY = 0;
		img.style.transform = `translate(${-initialX}px, ${-initialY}px)`
	}		
});
document.addEventListener('mouseup', function (event) {//鼠标放开时触发
	isDragging = false
	event.preventDefault();//阻止默认行为
})
		

let  _html = "", _cont = ""
list.forEach((e, i) => {
	let a = e.mapPoint.split(",")
	let display = ""
	if (a[0].length > 2) {
		display = "block"
	} else {
		display = "none"
	}
	_html += `<div class="wab" draggable="true" id=${e.id} >${e.name}</div> `;
	_cont += `<div class="big-nr" style="top:${a[1]}px;left:${a[0]}px; display: ${display};" >${e.name}</div> `;
})

	point.innerHTML = _html;
	img.innerHTML = _cont


for (let i = 0; i < addre.length; i++) {
	var g = addre[i];
	g.addEventListener('dragstart', function (event) {//拖拽开始时在被拖拽元素上触发事件
		event.dataTransfer.setData('text/plain', event.target.id);
	});
}


img.addEventListener('dragover', function (event) {//在目标元素上移动时触发
	event.preventDefault();//阻止默认行为
});
img.addEventListener('drop', function (event) {//鼠标放开时触发
	var droppedElementId = event.dataTransfer.getData('text/plain');
	for (let i = 0; i < addre.length; i++) {
		for (let k = 0; k < addName.length; k++) {
			if (addre[i].id == droppedElementId && addName[k].innerText == addre[i].innerText) {
				
				let positionX = (event.clientX - img.getBoundingClientRect().left) - (addre[i].getBoundingClientRect().width / 2);
				let positionY = (event.clientY - img.getBoundingClientRect().top) - (addre[i].getBoundingClientRect().height / 2);
				addName[k].style.display = "block"
				addName[k].style.left = positionX + 'px';
				addName[k].style.top = positionY + 'px';
				let xy = positionX + "," + positionY
                list[k].mapPoint=xy
					
			}
		}
	}
	event.preventDefault();
})