直播网站源码，Vue实现拖拽穿梭框功能两种方式

直播网站源码，Vue实现拖拽穿梭框功能两种方式

一、使用原生js实现拖拽

 


<head>
  <meta charset="UTF-8" />
  <title>Lazyload</title>
  <style>
    .drag {
      
      position: absolute;
      line-height: 100px;
      text-align: center;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <!-- left和top要写在行内样式里面 -->
  <div class="drag" style="left: 0; top: 0">按住拖动</div>
  <script src="./jquery-3.6.0.min.js"></script>
  <script>
    // 获取DOM元素
    let dragDiv = document.getElementsByClassName('drag')[0]
    // 鼠标按下事件 处理程序
    let putDown = function (event) {
      dragDiv.style.cursor = 'pointer'
      let offsetX = parseInt(dragDiv.style.left) // 获取当前的x轴距离
      let offsetY = parseInt(dragDiv.style.top) // 获取当前的y轴距离
      let innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
      let innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距
      // 按住鼠标时为div添加一个border
      dragDiv.style.borderStyle = 'solid'
      dragDiv.style.borderColor = 'red'
      dragDiv.style.borderWidth = '3px'
      // 鼠标移动的时候不停的修改div的left和top值
      document.onmousemove = function (event) {
        dragDiv.style.left = event.clientX - innerX + 'px'
        dragDiv.style.top = event.clientY - innerY + 'px'
        // 边界判断
        if (parseInt(dragDiv.style.left) <= 0) {
          dragDiv.style.left = '0px'
        }
        if (parseInt(dragDiv.style.top) <= 0) {
          dragDiv.style.top = '0px'
        }
        if (
          parseInt(dragDiv.style.left) >=
          window.innerWidth - parseInt(dragDiv.style.width)
        ) {
          dragDiv.style.left =
            window.innerWidth - parseInt(dragDiv.style.width) + 'px'
        }
        if (
          parseInt(dragDiv.style.top) >=
          window.innerHeight - parseInt(dragDiv.style.height)
        ) {
          dragDiv.style.top =
            window.innerHeight - parseInt(dragDiv.style.height) + 'px'
        }
      }
      // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
      // 否则鼠标抬起后还可以继续拖拽方块
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
        // 清除border
        dragDiv.style.borderStyle = ''
        dragDiv.style.borderColor = ''
        dragDiv.style.borderWidth = ''
      }
    }
    // 绑定鼠标按下事件
    dragDiv.addEventListener('mousedown', putDown, false)
  </script>
</body>

​

二、VUe使用js实现拖拽穿梭框

 

<h3 style="text-align: center">拖拽穿梭框</h3>
<div id="home" @mousemove="mousemove($event)">
  <div class="tree-select-content">
    <span
      class="select-content"
      :id="'mouse' + index"
      v-for="(item, index) in leftData"
      :key="item.id"
      @mousedown="mousedown(index, 1)"
      @mouseup="mouseup(item, 1, index)"
    >
      <span class="select-text">{{ item.label }}</span>
      <span class="select-text-X" @click="handerClickX(item, index, 1)"
        >X</span
      >
    </span>
  </div>
  <div class="tree-select-content">
    <span
      class="select-content"
      :id="'deleteMouse' + index"
      v-for="(item, index) in rightData"
      :key="item.id"
      @mousedown="mousedown(index, 2)"
      @mouseup="mouseup(item, 2, index)"
    >
      <span class="select-text">{{ item.label }}</span>
      <span class="select-text-X" @click="handerClickX(item, index, 2)"
        >X</span
      >
    </span>
  </div>
</div>

 

以上就是直播网站源码，Vue实现拖拽穿梭框功能两种方式， 更多内容欢迎关注之后的文章

 

posted @ 2022-11-16 14:07  云豹科技-苏凌霄  阅读(57)  评论(0)    收藏  举报