Перетаскивание в любом месте экрана с несколькими элементами одного и того же classа идентификатора и тега HTML

Следующий код позволит перетаскивать; Мне жаль, что он не соответствует вашему предыдущему стилю кодирования.

Вот JSFiddle, показывающий его в действии: https://jsfiddle.net/6gq7u8Lc/

  document.getElementById("dragme").onmousedown = function(e) { this.prevX = e.clientX; this.prevY = e.clientY; this.mouseDown = true; } document.getElementById("dragme").onmousemove = function(e) { if(this.mouseDown) { this.style.left = (Number(this.style.left.substring(0, this.style.left.length-2)) + (e.clientX - this.prevX)) + "px"; this.style.top = (Number(this.style.top.substring(0, this.style.top.length-2)) + (e.clientY - this.prevY)) + "px"; } this.prevX = e.clientX; this.prevY = e.clientY; } document.getElementById("dragme").onmouseup = function() { this.mouseDown = false; } 

На боковой ноте вы не сможете дать им одинаковый идентификатор. DOM не поддерживает такую ​​вещь. Если вы хотите добавить несколько элементов одного типа, я бы предложил родительский div «container», добавив элементы как дочерние элементы div и выполнив итерацию через атрибут .children для доступа к каждому из них.

Не знаю, хотите ли вы использовать JQuery или нет, но я знаю, что это намного проще, чем исходное решение javascript. Я искал интернет и Stack Overflow для простого перетаскивания в любом месте решения для веб-страниц, но я не мог найти тот, который работал. Другие ответы на этот вопрос были для меня странными. Они иногда работают, иногда нет. Однако друг предложил использовать версию JQuery и ничего себе, это намного проще. Всего одна строка кода!

 var dragme = document.getElementsByClassName("dragme"); for (var i = 0; i < dragme.length; i++) { $(dragme[i]).draggable(); } 
 .dragme { cursor: move; } 
   

Try dragging me anywhere on this sample!

Drag me, too!