Question

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

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

我已经有了它的工作，但鉴于我的最终目的是建立一个小页面，可以将图像从一个div拖放到另一个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的错误吗？

Answer 1

好吧，没有人回答，这在Safari中运行得很好，所以它必须是Chrome（v23.0）错误。

我在拖拽拖放div的鬼影周围做的是fadeIn / fadeOut起源div，这似乎照顾它。

Chrome flexbox拖放重绘错误？

1 个答案: