drag and drop in vue js without component

前端未结

关注

 2  1420

轻奢々

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

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

相关标签:

2条回答

无人及你

2021-01-05 06:49

You can use @dragover.prevent along with @drop.stop.prevent to prevent web browsers default behavior (like opening the files).

You can go and check the documentation about events handling if you want more details : VueJS Event Handling Documentation

Here is an example of how you could implement a basic drag & drop :

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(event) {
      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>

0 讨论(0)

一生所求

2021-01-05 07:05

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

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>

0 讨论(0)