web-dev-qa-db-ja.com

html5ドラッグ可能な元の要素を非表示

HTML5のdraggable属性を使用して要素のドラッグを開始すると、元の要素がまだ表示されているので、1つではなく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>

ここに問題を示すjsfiddleがあります https://jsfiddle.net/gjc5p4qp/

javascripthtmldraggablehtml5-draggable
16
julesbou

あなたはこれをハッキーな解決策に成功させるかもしれません。ネイティブのドラッグ機能では、_opacity:0;_、_visibility:hidden_、_display:none_などのCSSスタイルは使用できません。

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

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

16
Filipe

単にvisibility: hiddenが機能しません。別のややハックな解決策を見つけました：set 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>
9
Hatchet

これが見つかりました： https://stackoverflow.com/a/35120001/1807542

代わりに、ドラッグオーバーハンドラーでソース/元の要素を非表示にするクリーンなソリューションを使用します。

var dragging;
function dragstart(e) {
  dragging = $(this);
}

function dragover(e) {
  dragging.hide();
}

function dragend(e) {
  if (dragging) {
    dragging.show();
    dragging = undefined;
  }
}
0
Michel Jansson