2012-05-03 15 views
2

「dragImage」をHTML5でドラッグ&ドロップすると、div要素に設定するときに問題が発生しました。 のヘルパー-1引数がsetDragImage(helper、x、y)関数がdomに表示されていないか、隠されているとき、 'dragstart'イベントが発生しても表示されません。 は私のバイオリンを見ている: は緑のドラッグ可能なボックスをドラッグしてみてくださいよりも ドラッグが開始したときに、ヘルパーをマウスに取り付けられている。私はヘルパーをレンダリングしていますフィドルでhttp://jsfiddle.net/AemN5/10/なぜHTML5のドラッグ&ドロップdragImageが非表示になっても表示されないのですか?

(それが黄色に着色です)。ただし、ヘルパーの上にあるボタンをクリックして、 ヘルパーを非表示にしてください。緑のドラッグ可能なボックスをドラッグしてみてください - いいえヘルパーなし は私のマウスに接続されています。

何が起こっているのか、さらに重要なことは何ですか?問題を解決するにはどうすればよいですか?私の主な目標は、目に見えないヘルパーを持ち、ユーザーがドラッグを開始したときだけ、カーソルにアタッチされていることを視覚化することです。

答えて

2

は、ここに1つの可能な解決策http://jsfiddle.net/AemN5/12/

+0

特にオーバーフローを追加すると見栄えが良い:ボディエレメントに隠されている! –

0

次のようにやってみ..
クロムは、ドラッグが開始されるまで、少なくとも、表示する画像が必要です。

$("[draggable]").on("dragstart", function(e) { 
    $("#img1").show(); 

    e.originalEvent.dataTransfer.setDragImage(helper, 50, 50); 

    setTimeout(function(){ 
     $("#img1").hide(); 
    },0); 
}); 
+0

これはSafariでは動作しません:( –