How to display forbidden icon when dragging in vue

As front-end development becomes more popular and popular, it is becoming more and more popular to use JavaScript frameworks when writing websites or applications. Vue.js is one of the most popular JavaScript frameworks out there, and it provides many convenient ways to build responsive and interactive user interfaces. It is a very common requirement to implement drag-and-drop function in Vue.js. This article will introduce how to use drag-and-drop function in Vue.js and display the prohibition icon when dragging.

Step one: Install and import the Vue.draggable plug-in

The Vue.draggable plug-in is a very useful plug-in that allows you to easily implement drag-and-drop functionality in Vue. To install this plug-in, you can use the npm package management tool, and you can use the following command:

npm install vuedraggable --save

After completing the installation, you need to import the Vue.draggable plug-in in the Vue project:

import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

Step 2: Use Vue.draggable to implement the drag-and-drop function

Now that you have successfully installed and imported the Vue.draggable plug-in, we will use it to implement the drag-and-drop function. First, we need to define the element we want to drag in the template.

<template>
  <div>
    <div class="container">
      <div class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
    <draggable :list="items" :options="{ handle:&#39;.handle&#39; }" @end="onEnd">
      <div class="draggable-item handle">{{ items }}</div>
    </draggable>
  </div>
</template>

In the above template, we use the Vue.draggable plug-in to implement our drag and drop functionality. We define a container with multiple elements and each element contains an index and a value in the "items" array. We also define a draggable element that we can drag over and drop into a container.

After we define the element, we need to define a method to respond to drag and drop events. In this method we can check if the drag and drop event occurred outside the container. If so, we can display a disable icon.

methods: {
  onEnd(event) {
    const nodeList = document.querySelectorAll('.vuedraggable-container')
    const dragList = nodeList[0].getBoundingClientRect()
    const container = document.querySelector('.container').getBoundingClientRect()
    if (dragList.top < container.top || dragList.bottom > container.bottom) {
      event.preventDefault()
      console.log('Do not drop outside of the container!')
    }
  }
},

In this method, we first get the position of the container and check if the drag event occurs outside the container. If so, we use the event.preventDefault() method to prevent the default behavior of the drag and drop event and output a warning message.

In terms of code implementation, the last thing to remember is to add a style to the container.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  background: #eee;
  text-align: center;
  cursor: move;
}
.draggable-item {
  margin: 5px;
  padding: 10px;
  background: #7a7a7a;
  color: #fff;
  text-align: center;
  cursor: move;
}

Here, we define a container style and item style. We also added styles for draggable elements.

Now, we have successfully implemented the drag and drop function in Vue.js. When an element is dragged, a prohibition icon will be displayed. This is a simple way to implement a very common requirement, and using Vue.js and its plug-ins, we can implement complex drag-and-drop functionality more easily.

The above is the detailed content of How to display forbidden icon when dragging in vue. For more information, please follow other related articles on the PHP Chinese website!