Не-не, это какая-то колбаса. Такое невозможно реализовать без математических рассчетов. Эта задача чисто про математические рассчеты, координаты и позиционирования. Тот код который ты делаешь - в верном направлении.
Я бы делал через глобальный обработчик и из event бы находил произошел ли mouseDown по картинке и по какой. Именно этот код может ломаться (такое видел много раз) когда мышка отпускается за пределами картинки просто потому что браузер не успел отрисовать картинку на mouseMove.
getImage(event) - пройдется по всем parentNode и найдет хотя бы один из них кто есть картинка.
Еще бы сделал общий хелпер чтобы использовать его как в расстановке так и в драг-н-дропе картинки. Чтобы он возвращал все интересующие меня значения по картинке в объекте (ширина, высота, левая позиция, правая позиция).
getImageData(img). Потом ее будет удобно использовать для вычисления новых координат картинки при движении мыши, а так же чтобы запоминать начальное положение картинки при mousedown.
Вот это совсем не надо. Может даже портить всю ту хорошую логику которая написана.
У тебя все элементы на месте. Чуток не хватает чтобы было то что надо. Направление верное.
Я напишу свою структуру. В ней ты узнаешь элементы которые у тебя есть. И поймешь чего не хватает:
- сделай обработчик mouseDown (можно на каждую картинку, но лучше глобально на документ и потом определять с помощью
event.target был ли mouseDown по картинке)
- если mouseDown был по картинке
- то запомни в переменную ссылку на DOM элемент картинки, а также запомни текущий imgData этого узла
- запомни координаты mouseDown
- добавь обработчик onMouseMove: в нем на каждое движение мышки
- получай значение на сколько мышка сдвинулась относительно mouseDown (у тебя будут в объекте события новые координаты), считай новую позицию картинки через getNewPos и присваивай это значение.
- добавь обработчик на onMouseUp на который убирается обработчик mouseDown
- если mouseDown был не по картинке, то ничего не делай.
В целом будет получаться структура типа такой. Тут важно чтобы и функции были именованные (тогда их можно будет использовать для убирания с обработчиков событий) и чтобы эти функции имели доступ к переменным, созданным в момент mouseDown.
// Характеристики картинки. Может нужно будет не top, left а x, y, или еще другой доступный/удобный параметр
getImgData(img) {
width: 10,
height: 20,
top: 30,
left: 40,
}
// Математика вычисления новых координат картинки из координат при mouseDown, mouseMove и imgData
getNewPos(mouseDown, mouseMoved, imgData) {
return {
top: 0,
left: 0
}
}
document.addEventListener('mousedown', (event) => {
const img = getImageFromEvent(event)
// запомнить координаты мыши откуда началось движение
const mouseDownX = ... ///
const mouseDownY = ... ///
let imgData
function mouseMove(event) {
// координаты мыши
// высчитать новые значения положения картинки
// присвоить значения в img
}
function mouseUp(event) {
document.removeEventListener('mousemove', mouseMove)
document.removeEventListener('mouseup', mouseUp)
}
if (img) {
imgData = getImgData(img)
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
}
})
