Safari OSXのドラッグ+ドロップ

Question

Safariはドラッグドロップをうまく処理できないようです。下のスニペットでは、ドラッグされたときに緑のdivがマウスポインタに追従しませんが、右に、下に移動します。

EDIT：ここに埋め込まれていると、緑色のdivはドラッグされても表示されません。このフィドルは良いですhttps://jsfiddle.net/8vckLerm/1/

私はそれが正しく動作するようにトリックを見つけることができませんでした。誰か提案はありますか？

おかげ

function ods(ev) { 
 
    console.log('START'); 
 
} 
 

 
function od(ev) { 
 
    ev.preventDefault(); 
 
    console.log('DROP'); 
 
} 
 

 
function odo(ev) { 
 
    ev.preventDefault(); 
 
    console.log('OVER'); 
 
}

div { 
 
    border: 1px solid black; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    background: white; 
 
} 
 

 
div[draggable] { 
 
    background: #cfc; 
 
    position: relative; 
 
}

<div ondragstart="ods(event)" draggable="true"> 
 
    Drag Me 
 
</div> 
 
<div ondrop="od(event)" ondragover="odo(event)"> 
 
    Hello 
 
</div>

Answer 1

は、あなたのods機能に次の行を追加します。

ev.dataTransfer.setData("text", ev.target.id); 

私はそれが問題に尋ねていない知っているが、それは、Firefox（10勝）で、ここでは動作しませんfiddle

function ods(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
    console.log('START'); 
 
} 
 

 
function od(ev) { 
 
    ev.preventDefault(); 
 
    console.log('DROP'); 
 
} 
 

 
function odo(ev) { 
 
    ev.preventDefault(); 
 
    console.log('OVER'); 
 
}

div { 
 
    border: 1px solid black; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    background: white; 
 
} 
 

 
div[draggable] { 
 
    background: #cfc; 
 
    position: relative; 
 
}

<div ondragstart="ods(event)" draggable="true"> 
 
    Drag Me 
 
</div> 
 
<div ondrop="od(event)" ondragover="odo(event)"> 
 
    Hello 
 
</div>