使用相同ID类和标记HTML的多个元素在屏幕上的任意位置拖放 [英] Drag and drop anywhere on screen with multiple elements of the same ID Class and Tag HTML

问题描述

大家好，这是我的第一个问题所以我可能做错了。
我想要实现的是多个< aside> 元素都具有相同的ID类，当然Tag可以移动到任何地方屏幕具有拖放特性。我找到了一个JSFiddle来演示我所基于的代码，它使用一个可以移动到任何位置的元素，但是当使用多个元素时将无法工作。控制移动的代码在这里：

Hello everyone this is my first question so I might have done it wrong. What I am trying to achieve is is have multiple <aside> elements all with the same ID Class and of course Tag be able to be moved anywhere on the screen with drag and drop characteristics. I have found a JSFiddle demonstrating the code I am basing this around that uses one aside element with the ability to be moved anywhere, but will not work when multiple elements are used. The code controlling the movement is here:

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系统需要帮助：

The part I am having trouble with is the drop system which requires the elements to have individual ids. I also need to have all aside elements have to same id and I don't want to use classes. I have tried and thought and searched the web for the past three days with no luck of finding an answer as all link back to this same code. I have looked into getting the index of the last element clicked but cannot find a way to get all elements with the same ID. Thanks in advanced - bybb Update: Have broken the dnd system need help with that:

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上尝试使用和不使用'＃'

Have tried with and without '#' on getelementbyid

推荐答案

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

The following code will allow drag and drop; I'm sorry it doesn't follow your previous coding style.

这是一个JSFiddle显示它的实际效果： https://jsfiddle.net/6gq7u8Lc/

Here is a JSFiddle showing it in action: 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不支持这样的事情。如果你想添加多个相同类型的元素，我建议使用'container'父div，将元素添加为div的子元素，并迭代.children属性来访问每个元素。

On a side note, you won't be able to give them all the same id. The DOM doesn't support such a thing. If you want to add multiple elements of the same type, I would suggest a 'container' parent div, adding the elements as children of the div, and iterating through the .children attribute to access each.

这篇关于使用相同ID类和标记HTML的多个元素在屏幕上的任意位置拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！