使多个元素可拖动到用户想要在屏幕上的任何位置并让它们停留在那里

Question

我在页面上有 9 个 DIV 元素，全部带有类单元格，这是我到目前为止的代码...它可以将它们拖动到屏幕上的任何位置，但我以某种方式搞砸了，因为它不起作用现在可能是因为我尝试了多个代码来执行相同的操作但没有结果，但这是我尝试过的相关代码...非常感谢任何帮助！预先感谢！

.cell {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: 0px;
    overflow: auto;
    cursor: move;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    overflow-x: scroll;
    overflow-y: scroll;
    transition: all 0.3s ease;
    z-index: 1;
    set-draggable: true;
}
.cell.dragging {
    border-radius: 24%;
    z-index: 1000;
}
        <div id="cell7" class="cell" data-content="mgmt">
        </div>
    </div>
    <script>
        document.getElementById("cell*").onmousedown = function(e) {
        this.prevX = e.clientX;
        this.prevY = e.clientY;
        this.mouseDown = true;
    }
    document.getElementById("cell*").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("cell*").onmouseup = function() {
        this.mouseDown = false;
    }
        
let cells = document.getElementsByClassName("cell");
for(list of cells){
    list.addEventListener("dragstart", function(e){
        let selected = draggable;|
                          })}
        class PyramidCell {
    constructor(element) {
        this.element = element;
        this.isDragging = false;
        this.currentX = 0;
        this.currentY = 0;
        this.initialX = 0;
        this.initialY = 0;
        this.xOffset = 0;
        this.yOffset = 0;

        // Call setup functions
        this.setupEventListeners();
    }

    setupEventListeners() {
        this.element.addEventListener('mousedown', (e) => this.dragStart(e));
        document.addEventListener('mousemove', (e) => this.drag(e));
        document.addEventListener('mouseup', () => this.dragEnd());
    }

    dragStart(e) {
        this.initialX = e.clientX - this.xOffset;
        this.initialY = e.clientY - this.yOffset;

        if (draggable === this.element) {
            this.isDragging = true;
            this.element.classList.add('dragging');
        }
    }
            
    drag(e) {
        if (this.isDragging) {
            e.preventDefault();
            this.currentX = e.clientX - this.initialX;
            this.currentY = e.clientY - this.initialY;
            this.xOffset = this.currentX;
            this.yOffset = this.currentY;

            this.setTranslate(this.currentX, this.currentY);
        }
    }

    dragEnd() {
        this.initialX = this.currentX;
        this.initialY = this.currentY;
        this.isDragging = false;
        this.element.classList.remove('dragging');
    }

    setTranslate(xPos, yPos) {
        this.element.style.transform = `translate(${xPos}px, ${yPos}px)`;
    }
}

// Initialize all cells
document.querySelectorAll('.cell').forEach((cell) => {
    new PyramidCell(cell);
})

它工作过一次，但后来我改变了单元格的颜色/不透明度，它们突然不再可拖动，我不得不在这里放一些东西来发布问题，所以......再次提前感谢您的任何帮助。

Answer 1

我不确定你的 JS 发生了什么，但我知道有一个更简单的方法来做到这一点。

需要注意的一些事项：确保设置了 CSS 变量“cell-size”并且您实际上可以看到该框。另外，删除“transition:”CSS 属性，因为这会破坏拖动效果。

这是一些代码：

document.querySelectorAll('.cell').forEach((cell) => {
    dragInit(cell);
});

function dragInit(elem) {
  var newX = 0, newY = 0, initalX = 0, initialY = 0;
  elem.onmousedown = mouseDownDrag;

  function mouseDownDrag(e) {
    e = e || window.event;
    e.preventDefault();
    initialX = e.clientX;
    initialY = e.clientY;
    document.onmouseup = () => {document.onmouseup = null; document.onmousemove = null;};
    document.onmousemove = dragDiv;
  }

  function dragDiv(e) {
    e = e || window.event;
    e.preventDefault();
    
    newX = initialX - e.clientX;
    newY = initialY - e.clientY;
    initialX = e.clientX;
    initialY = e.clientY;
    elem.style.left = (elem.offsetLeft - newX) + "px";
    elem.style.top = (elem.offsetTop - newY) + "px";
  }
}

.cell {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: 0px;
    overflow: auto;
    cursor: move;
    box-shadow: 0 0 15px rgba(255, 255, 255,0.8);
    background-color:red;
    z-index: 1;
}
:root{
  --cell-size: 100px
}

<div id="cell7" class="cell" data-content="mgmt"></div>