Question

我想在vue js中使用html 5拖放。

我看到了有关拖放的w3schools教程。它可以在一个简单的html文件中工作，但在我的vue项目中不起作用

我的教程代码和链接是： w3schools-拖动：https://www.w3schools.com/jsref/event_ondrag.asp 和我的错误说：未捕获的ReferenceError：未定义allowDrop

我在vue js的方法范围内定义了所有方法。

Answer 1

例如，您只需要调用vue事件而不是html事件v-on:drop而不是drop

这是您在vue链接中提供的示例的实现

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
    .droptarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
    </style>
  </head>
  <body>
    <div id="app">
      <p>Drag the p element back and forth between the two rectangles:</p>
      <div
        class="droptarget"
        v-on:drop="drop"
        v-on:dragover="allowDrop"
      >
        <p
        v-on:dragstart="dragStart"
          v-on:drag="dragging"
          draggable="true"
          id="dragtarget"
        >
          Drag me!
        </p>
      </div>

      <div
        class="droptarget"
        v-on:drop="drop"
        v-on:dragover="allowDrop"
      ></div>

      <p style="clear:both;">
        <strong>Note:</strong> drag events are not supported in Internet
        Explorer 8 and earlier versions or Safari 5.1 and earlier versions.
      </p>

      <p id="demo"></p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",

        methods: {
          dragStart:function(event)  {
            event.dataTransfer.setData("Text", event.target.id);
          },
          dragging:function(event) {
            document.getElementById("demo").innerHTML =
              "The p element is being dragged";
          },
          allowDrop:function(event) {
            event.preventDefault();
          },
          drop:function(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("demo").innerHTML =
              "The p element was dropped";
          }

        }
      });
    </script>
  </body>
</html>

Answer 2

您可以将@dragover.prevent与@drop.stop.prevent一起使用，以防止Web浏览器出现默认行为（例如打开文件）。

如果需要更多详细信息，可以查看事件处理文档： VueJS Event Handling Documentation

以下是如何实现基本拖放的示例：

new Vue({
  el: "#app",
  methods: {
    // Will be fired by our '@drop.stop.prevent'; in this case, when a file is dropped over our app
    onDrop(e) {
      const file = event.dataTransfer.files[0];

      // Do something with the dropped file
      console.log(file)
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

p {
  text-align: center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app" @dragover.prevent @drop.stop.prevent="onDrop">
  <p>Drag & Drop</p>
</div>

拖放没有组件的vue js

2 个答案: