0

HTML 5のドラッグアンドドロップについて学び、このチュートリアルに従います。

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

私はそれを機能させていますが、私の最終的な意図は、あるdivから別のdivに画像をドラッグアンドドロップできる小さなページを作成することであるため、ドラッグした要素のIDを取得し、その要素の.appendChildを、画像をドロップできるdivに追加します。

正常に動作しますが、Chrome（OSX上）に再描画のバグがあるようです。3つの画像の1つをドロップターゲットにドラッグするとすぐに追加されますが、そのゴーストは元の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 に答える