拖放屏幕上具有相同 ID 类和标记 HTML 的多个元素的任意位置

Question

大家好，这是我的第一个问题，所以我可能做错了。 我想要实现的是拥有多个 <aside> 元素，它们都具有相同的 ID 类，当然标签可以通过拖放特性移动到屏幕上的任何位置。我找到了一个 JSFiddle，它展示了我所基于的代码，它使用一个可以移动到任何地方的侧边元素，但在使用多个元素时将不起作用。控制运动的代码在这里：

function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + 

(parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
} 
var dm = document.getElementById('dragme'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 

我遇到的问题是放置系统，它要求元素具有单独的 ID。我还需要让所有旁边的元素都具有相同的 ID，并且我不想使用类。在过去的三天里，我一直在尝试、思考和搜索网络，但没有找到答案，因为所有链接都返回到相同的代码。我已经研究过点击最后一个元素的索引，但找不到获取具有相同 ID 的所有元素的方法。提前致谢 - bybb 更新：已经破坏了 dnd 系统需要帮助：

var dragindex = 0;
$(document).ready(function(){
    $("aside").click(function(){
        dragindex = $(this).index();
    });
});
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
event.preventDefault(); 
return false; 
} 
function drop(event) { 
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('#winborder');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
} 
function makewindow(content, storevar) {
    storevar = document.createElement('aside');
    storevar.setAttribute("dragable", "true");
    storevar.setAttribute("id", "winborder");
    var content = document.createElement('div');
    content.setAttribute("id", "wincontent");
    storevar.appendChild(content);
    document.body.appendChild(storevar);
    storevar.addEventListener('dragstart',drag_start,false);
    document.body.addEventListener('dragover',drag_over,false); 
    document.body.addEventListener('drop',drop,false); 
}

尝试过在 getelementbyid 上使用和不使用 '#'

Answer 1

以下代码将允许拖放；很抱歉它没有遵循您以前的编码风格。

这是一个展示它的 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;
    }

附带说明，您将无法为他们提供所有相同的 ID。 DOM 不支持这样的事情。如果您想添加多个相同类型的元素，我建议使用“容器”父 div，将元素添加为 div 的子元素，并遍历 .children 属性来访问每个元素。

Answer 2

不知道您是否想使用 Jquery，但我知道它比原始 javascript 解决方案简单得多。我一直在 Internet 和 Stack Overflow 上搜索网页解决方案上任何位置的简单拖放，但我找不到一个有效的方法。这个问题的其他答案对我来说很奇怪。他们有时工作，有时不工作。但是，有朋友建议使用 Jquery 版本，哇，它简单多了。只需一行代码！

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

.dragme {
  cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<h1 class="dragme">Try dragging me anywhere on this sample!</h1>
<h2 class="dragme">Drag me, too!</h2>

重要提示：此代码仅适用于 Jquery，它还需要 Jquery UI 文件。

如果上面的示例不适合您，请评论下面显示的错误。请注意，这适用于无限数量的元素。这个特定示例适用于具有“dragme”类的元素，因此只需将其替换为您自己的类即可。对于一个元素，它是一行代码：$("#yourid").draggable();。

此代码适用于我在 Google Chrome 上。希望这可以帮助像我这样迟到的人！