拖放没有组件的vue js

本文介绍了拖放没有组件的vue js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to use html 5 drag and drop in vue js .

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

I see the w3schools tutorial about drag and drop .It works in a simple html file but doesn't work in my vue project

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

My tutorials code and link is :w3schools - drag : https://www.w3schools.com/jsref/event_ondrag.aspand my error says :Uncaught ReferenceError: allowDrop is not defined

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

I define all methods in method scope in vue js.

推荐答案

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

you just need to call the vue event not the html event v-on:drop instead of drop for example

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

here is the implementation of the example you provided in the link with 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>

这篇关于拖放没有组件的vue js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

AllowDrop