問題描述

大家好，這是我的第一個問題，所以我可能做錯了.我想要實現的是擁有多個 <aside> 元素，它們都具有相同的 ID 類，當然標簽可以通過拖放特性移動到屏幕上的任何位置.我找到了一個 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;
    }

附帶說明，您將無法為他們提供所有相同的 ID.DOM 不支持這樣的事情.如果您想添加多個相同類型的元素，我建議使用容器"父 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 的多個元素的任意位置的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！