Question

72

drag and drop in vue js without component

rated 0 times [ 74] [ 2] / answers: 1 / hits: 20456 / 5 Years ago, thu, may 16, 2019, 12:00:00

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

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

I define all methods in method scope in vue js.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yaquelina

Add To Favorites

Follow

Total Points: 517

Total Questions: 101

Total Answers: 96

Location: Egypt

Member since Tue, Jul 6, 2021

3 Years ago

answered 5 Years ago tyasiaalmap · Accepted Answer

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>