Question

我有一个简单的拖放操作，您可以将图像从一个框移动到另一个框。每当您将图像拖放到另一个框时，它都会自动对齐。虽然，它会自动对齐盒子外面的图像。这是我的代码：

＆＃13;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

＆＃13;

#div1, #div2 {
    float: left;
    width: 35px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

＆＃13;

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

＆＃13;

我该如何解决这个问题？

Answer 1

您只需删除padding并调整height和width

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

#div1, #div2 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    border: 1px solid black;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Answer 2

你的css中的drop区域div太小了。如果您将它们与图像的大小相匹配，则它会正确对齐

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

#div1, #div2 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Answer 3

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

#div1, #div2 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    padding: 0px;
    border: 1px solid black;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

使用拖放重新定位

3 个答案: