Question

每当在html5画布上拖放DOM对象时，我都会尝试调用处理函数，但由于某种原因，事件未被触发。

根据Mozilla开发者网络，我正在寻找的事件是drop或dragend。这直接来自此参考。 https://developer.mozilla.org/en-US/docs/Web/Events

dragend - 正在结束拖动操作（通过释放鼠标按钮或按下转义键） drop - 将元素放在有效目标

上

这是我设置的一个简单测试用例的JS小提琴。我设置了记录器功能，以便我可以测试哪些事件被触发。橙色画布带有一个按钮和一个黑点图像。黑点和按钮都是可拖动的元素。在画布上拖放它们时，不会触发drop或dragend个事件。为什么不？

触发的唯一拖动事件是dragover！

HTML

<div id="app">
  <p>{{ message }}</p>
  <button v-bind:draggable="true">drag_me </button>
  <img src="http://www.emoji.co.uk/files/microsoft-emojis/symbols-windows10/10296-medium-black-circle.png" width=10 height=10 v-bind:draggable="true"/>
  <canvas
    id=canvas
    width="200"
    height="200"
    @mousedown="mousedown"
    @mouseup="mouseup"
    @mousemove="mousemove"
    @dragend="dragend"
    @drop="drop"
    @drag="drag"
    @dragover="dragover"
  ></canvas>
</div>

JS

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods:{
    mousedown(event){
    console.log('mousedown')
    },
    mouseup(event){
    console.log('mouseup')
    },
    mousemove(event){
    console.log('mousemove')
    },
    dragend(event){
      console.log("mouseend")
    },
    drop(event){
      console.log("drop")
    },
    drag(event){
      console.log("drag")
    },
    dragover(event){
      console.log("dragover")
    }
  }
})

Answer 1

将event.preventDefault();添加到您的dragover方法中。

来自：https://www.w3schools.com/html/html5_draganddrop.asp：

ondragover事件指定可以删除拖动数据的位置。

默认情况下，不能在其他元素中删除数据/元素。为了允许删除，我们必须阻止元素的默认处理。

这是通过调用ondragover事件的event.preventDefault（）方法完成的：

javascript拖动未注册的事件

1 个答案: