vue中实现拖拽选中节点（如选中日历）

最新推荐文章于 2024-04-03 14:27:12 发布

wjq-xxq

最新推荐文章于 2024-04-03 14:27:12 发布

阅读量366

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/wjq_xxq/article/details/130724276

版权

利用mousedown和mouseMove方法来实现

demo：

<template>
  <el-dialog close-on-click-modal="false" v-model="show" :title="title"
             destroy-on-close>
    <div>

      <ul ref="ul" @mousedown="mouseDown" id="dragUl">

        <li class="li" v-for="(i,index) in item">{
  {index}}</li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "drag",
  data(){
    return {
      item: new Array(50),
      show: false,
      title: '',
      sX:'',
      sY:'',
      eX:'',
      eY:'',
    }
  },
  props: {
    dialogType:{
      type: String,
      default: '',
    }
  },
  mounted() {

  },
  methods: {
    mouseDown(e){
      let parent = Array.from(document.querySelectorAll('#dragUl>li'))