Question

当开始使用HTML5 draggable属性拖动元素时，原始元素仍然可见，因此我最终会看到两个元素而不是一个。

如何才能使被拖动的元素可见（原始元素应暂时隐藏）。

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

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

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

这是一个显示问题{j}的问题https://jsfiddle.net/gjc5p4qp/

Answer 1

你可能会成为一个hacky解决方案。原生可拖动性不允许CSS样式，如：opacity:0;，visibility:hidden或display:none。

但你可以使用：transform:translateX(-9999px)。

我已使用解决方案更新了您的JSFiddle。

Answer 2

由于简单地设置visibility: hidden不起作用，我发现另一个有点hacky的解决方案：在拖动事件开始后设置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>

Answer 3

发现了这个：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;
  }
}

Answer 4

这可以通过先前答案中的技巧来实现。

关键是要监听drag事件，而不是dragstart。

//listen to drag event, not dragstart!
document.querySelector(".draggable").addEventListener("drag", (e)=>{
  e.target.classList.add("dragging");
});
document.querySelector(".draggable").addEventListener("dragend", (e)=>{
  e.target.classList.remove("dragging");
});

.draggable {
  width: 200px;
  height: 30px;
  background-color:#5856d6;
  text-align:center;
  line-height:30px;
}

.dragging {
  background: transparent;
  color: transparent;
  border: 1px solid #5856d6;
}

<div draggable="true" class="draggable">Drag me!</div>

Answer 5

Filipe的回答确实很有帮助。如果if channel await bot.send_message(channel, 'hi'): print("successfully sent message")或setTimeout对您不起作用。尝试添加过渡。

requestAnimationFrame

Answer 6

您可以将此代码添加到您的 dragStart 事件：

event.dataTransfer.setDragImage(new Image(), 0, 0); // Hide the dragged element

它将隐藏您的目标拖动元素。

html5 draggable隐藏原始元素

6 个答案: