2016-07-05 4 views
1

私はウェブページ上の空のモールドに画像をドラッグアンドドロップしようとしていました。したがって、まず箱を試しています。しかし、画像をボックスにドラッグすると、画像はボックスに表示されるのではなく、画像の外に表示されます。CSS5とJS5を使ったHTML5のドラッグ&ドロップ

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("image"); 
    var new_img = $('#'+data).clone(); 
    $('#'+ev.target.id).html(new_img); 
    ev.target.appendChild(document.getElementById(data)); 
} 
+0

あなたが視覚的に外部の意味ですか?あなたがDOMを見ているときには、文字通り外側にあるでしょうか? –

+0

は視覚的に外側です。あたかも割り当てられた新しい位置が自動的に上書きされたかのように。 –

答えて

0

これは、JSではなくCSSの問題である可能性が高いです。 画像にfloatプロパティが設定されていないことを確認してください(あなたのCSSにimg {float: none !important;}を追加して解決するかどうか確認できます)。

それが問題になることが判明した場合、clearfixを適用する方法を見てみましょう:What methods of ‘clearfix’ can I use?

+0

これは本当に役立ちますが、私がドラッグしている画像の位置をオーバーライドしているので、画像の位置が乱れます。 HTMLヘルプで画像の位置を定義しますか? –

+0

これは解決策ではありません。フローティングが問題であるかどうかを確認するテストに過ぎませんでした。良い修正は、答えで参照されるリンクであるclearfixを適用することです。オプションで、コンテナに 'float:left'を使用することができます。 –

+0

申し訳ありませんが、私は明らかではなかったと思います。だから、ボックスに落とす必要のある画像があると言うことができます。今は早く(画面の下隅にある画像と中央のボックス)、ドロップされた画像はボックスの中にとどまりません。ただし、floatオプションを使用すると、それを維持できます。さて、問題は画像がその位置を保持しておらず、どこかのデフォルトのものを仮定していることです。 –

関連する問題