Chrome flexbox拖放重繪錯誤？

我瞭解HTML 5拖放和下面這個教程：Chrome flexbox拖放重繪錯誤？

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

我找到了工作，但考慮到我的最終目的是要建立一個小頁面，使拖曳並將圖像從一個div拖放到另一個div，我正在做的是獲取拖動元素的id，並將該元素的.appendChild分配給可以放置圖像的div。

它工作正常，但它似乎有Chrome上的重繪錯誤（在OSX上），因爲只要我將三個圖像中的一個拖放到放置目標，它就會被添加，但它的一個鬼影仍然在原始div。有時它會通過滾動頁面而消失，而其他時候則不會。

如果我刪除使原點/目標爲Flexbox的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的bug？

來源

2013-01-06 GR7

好吧，沒有人回覆，這在Safari中運行得很好，所以它必須是Chrome（v23.0）的bug。

我爲解決拖放div的重影所做的工作是淡入/淡出原始div，並且似乎照顧它。

來源

2013-01-11 02:05:35 GR7

Chrome flexbox拖放重繪錯誤？

回答

相關問題