0

我正在学习 HTML 5 拖放并遵循本教程：

http://html5doctor.com/native-drag-and-drop/

我已经让它工作了，但考虑到我的最终目的是构建一个小页面，可以将图像从一个 div 拖放到另一个，我正在做的是获取拖动元素的 id，然后做一个该元素的 .appendChild 到可以放置图像的 div 中。

它工作正常，但似乎在 Chrome（在 OSX 上）上存在重绘错误，因为一旦我将三个图像中的一个拖到放置目标，它就会被添加，但它的幽灵仍然在原始 div 上。有时它会通过滚动页面消失，有时它不会。

如果我删除了使原点/目标成为弹性框的 CSS，它可以正常工作，没有重影。

以下是我的 html/css/js，但我也把它放在了这里：http: //jsfiddle.net/3JznW/

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> Drag and Drop </title>
<script src="http://html5demos.com/h5utils.js"></script>
<style>

.fbox
{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
}

#origin {
    width: 600px;
    height: 120px;
    background-color: silver;   
}
#origin > div
{
    margin-top: 10px;
    background-color: DeepSkyBlue;
}

#drop {
    background-color: lightblue;
    width: 800px;
    height: 300px;
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" />
        <img src="http://placehold.it/170x100" id="two" title="two" />
        <img src="http://placehold.it/190x100" id="three" title="three" />
    </div>
    <p />
    <div id="drop" class="fbox">
    </div>
</div>

<script>

var dragItems = document.querySelectorAll("img");

for (var i = 0; i < dragItems.length; i++) {

    addEvent(dragItems[i], 'dragstart', function (event) {

        event.dataTransfer.setData("Text", this.id);
        console.log("dragged the id!! " + this.id);

  });
}

var drop = document.querySelector('#drop');

addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);

addEvent(drop, 'drop', function (event) {

  if (event.preventDefault) {
    event.preventDefault(); 
  }

  var id = event.dataTransfer.getData('Text');

  var elem = document.getElementById(id);

  drop.appendChild(elem);

  return false;
});

function cancel(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}


</script>
</body>
</html>

这个问题是因为我的代码而发生的吗？或者这会是一个 Chrome 错误吗？

4

1 回答 1

0

好吧，没有人回答，这在 Safari 中运行良好，所以它必须是一个 Chrome (v23.0) 错误。

我为解决拖放 div 的重影所做的工作是淡入/淡出原始 div，这似乎可以解决它。

于 2013-01-11T02:05:35.450 回答