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

一、使用原生js实现拖拽

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

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

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