Question

我有一个画布，我希望用户能够在其周围拖动图形元素。因此，我不希望画布本身拖动，但我想在鼠标执行这些操作时处理dragstart，拖放事件。

我使用Angular 2，所以我有：

<!-- editor.component.html -->
<div #rendererContainer
  draggable="true"
  (dragstart)="onDragStart($event)"
  (drag)="onDrag($event)" 
  (dragover)="onDrag($event)" 
  (drop)="onDragEnd($event)"
  (dragend)="onDragEnd($event)"> 
</div>

然后在editor.component.ts中：

onDragStart(event) {
  console.log(`starting`);
  event.preventDefault();
}

onDrag(event) {
  console.log('dragging');
  event.preventDefault();
}

onDragEnd(event) {
  console.log('drag end');
  event.preventDefault();
}

当我尝试拖动某些内容时，我会在控制台中打印出starting，但就是这样。如何让其他阻力事件发生？我是否必须从mousedown / move / up事件中滚动自己的拖动？

stackblitz上的独立示例。我想＆＃34;拖动＆＃34; div可以触发dragstart /拖放事件，但它只会激活起始事件。

Answer 1

您不必使用event.preventDefault()。只有在想要使用纯JS时才需要这样做。

试试这个Stackblitz：https://stackblitz.com/edit/angular-x7umar

另请参阅MDN实施指南，为您的目的选择正确的事件：https://developer.mozilla.org/en-US/docs/Web/Events/drag

进一步的步骤

如果您想修改拖动的元素，只需在dragstart的{{1}}和dragend处理程序中实施一些CSS调整：

event.target

使用onDragStart(event: DragEvent) { console.log(`starting`, event); // Hide dragged element event.target.style.opacity = 0; } onDragEnd(event: DragEvent) { console.log('drag end', event); // Show dragged element again event.target.style.opacity = 1; }，您拥有拖动元素的完整可操作DOM元素。

Answer 2

尝试

videoUrls = async () => {
  let i=0;
  let urllist=[]
  for(i;i< this.state.data.length;i++){
      const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      const json = await response.json()
      urllist.push(json.items[0])
      console.log({urllist})
    }
 }

组件

(dragover)="onDragOver($event)"
(dragleave)="onDragLeave($event)"

使用角度2

2 个答案:

进一步的步骤