html5 draggable元の要素を隠す

Question

HTML5のドラッグ可能な属性を使用して要素をドラッグすると、元の要素が引き続き表示されるため、最後に2つの要素が表示されるようになります。

ドラッグされている要素のみを表示するにはどうすればよいですか（元の要素は一時的に非表示にする必要があります）。

<script> 
    function startDrag() { 
    // hide initial element 
    } 

    function endDrag() { 
    // reset initial element 
    } 
</script> 

<div class="draggable" draggable="true" 
    ondragstart="startDrag(event)" 
    ondragend="endDrag(event)" 
></div> 

は、ここで問題にhttps://jsfiddle.net/gjc5p4qp/

Answer 1

あなたはこのハックソリューション成功することを示すために、jsfiddleです。ネイティブのドラッグ可能性は、opacity:0;,visibility:hiddenまたはdisplay:noneのようなCSSスタイルを許可しません。

しかし、これは、transform:translateX(-9999px)を使用して行うことができます。

あなたのJSFiddleをこのソリューションで更新しました。

Answer 2

単純にvisibility: hiddenを設定しても機能しないので、もう少し面白い解決策が見つかりました。ドラッグイベントが開始されてからvisibility: hiddenを1ミリ秒に設定します。

function startDrag(e) { 
 
    setTimeout(function() { 
 
    e.target.style.visibility = "hidden"; 
 
    }, 1); 
 
} 
 

 
function endDrag(e) { 
 
    setTimeout(function() { 
 
    e.target.style.visibility = ""; 
 
    }, 1); 
 
}

body { 
 
    display: inline-block; 
 
    outline: 1px solid black; 
 
} 
 
.draggable { 
 
    border-radius: 4px; 
 
    background: #CC0000; 
 
    width: 40px; 
 
    height: 40px; 
 
}

<div class="draggable" draggable="true" ondragstart="startDrag(event)" ondragend="endDrag(event)"> 
 

 
</div>