Html5 draggable hide оригинальный элемент

Когда вы начинаете перетаскивать элемент с помощью атрибута draghable HTML5, оригинальный элемент все еще отображается, поэтому в итоге я вижу два элемента, а не один.

Как я могу сделать, чтобы только перемещаемый элемент был видимым (исходный должен быть мгновенно скрыт).

<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/

Ответ 1

Вы можете преуспеть в этом хакерском решении. Внутренняя draggability не позволяет стили CSS: opacity:0;, visibility:hidden или display:none.

Но вы можете сделать это, используя: transform:translateX(-9999px).

Я обновил JSFiddle с помощью решения.

Ответ 2

Так как просто установка visibility: hidden не работает, я нашел другое довольно взломанное решение: установите visibility: hidden одну миллисекунду после запуска события перетаскивания.

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>

Ответ 3

Нашел это: fooobar.com/info/5553763/...

С чистым решением, чтобы вместо этого скрыть элемент source/original в обработчике dragover.

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

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

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