手写一个拖拽

最新推荐文章于 2024-07-21 13:38:37 发布

前端砖家

最新推荐文章于 2024-07-21 13:38:37 发布

阅读量610

点赞数 1

分类专栏： sortable 文章标签： js css html

本文链接：https://blog.csdn.net/weixin_46656983/article/details/112272390

版权

sortable 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

手写一个拖拽

原声js实现
拖拽需要三大事件：

mousedown 鼠标按下事件
mousemove 鼠标移动事件
mouseup 鼠标抬起事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手动实现拖拽</title>
</head>
<style>
  .move {
    position: absolute;
    width: 100px;
    height: 100px;
    background: gray
  }
</style>

<body>
  <div class="move-container">
    <div class="move">
    </div>
  </div>
  <script>
    let elem = document.querySelector('.move');
    let dragging; //拖拽状态
    let trans, portrait; //鼠标按下时相对于选中元素的位移

    document.addEventListener('mousedown', function (e) {
      if (e.target == elem) {
        dragging = true; //激活拖拽状态
        let elemRect = elem.getBoundingClientRect(); //返回元素的大小及其相对于视口的位置
        trans = e.clientX - elemRect.left; //鼠标按下时和选中元素的坐标偏移:x坐标
        portrait = e.clientY - elemRect.top; //鼠标按下时和选中元素的坐标偏移:y坐标
      }
    });
    document.addEventListener('mouseup', function (e) {
      dragging = false;
    });
    document.addEventListener('mousemove', function (e) {
      if (dragging) {
        var moveX = e.clientX - trans,
          moveY = e.clientY - portrait;

        elem.style.left = moveX + 'px';
        elem.style.top = moveY + 'px';

      }
    });
  </script>
</body>
</html>

HTML5原生拖拽draggable属性以及DataTranfers对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手动实现拖拽</title>
</head>
<style>
  .main {
    display: flex;
    justify-content: space-around;
  }

  .left {
    width: 300px;
    height: 500px;
    margin-right: 10px;
    border: 1px solid red;
    text-align: center;
    box-sizing: border-box;
    padding: 1pxx
  }

  .right {
    width: 300px;
    height: 500px;
    border: 1px solid lightseagreen;
    text-align: center;
    box-sizing: border-box;
    padding: 1px;
  }

  .txt {
    border: 1px solid gray;
    margin: 1px;
    padding: 5px;
    cursor: move;
  }
</style>

<body>
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">左边区域</div>
      <div id='txt1' draggable="true" class="dragable txt txt1">可移动的文字一</div>
      <div id='txt2' draggable="true" class="dragable txt txt2">可移动的文字二</div>
      <div id='txt3' draggable="true" class="dragable txt txt3">可移动的文字三</div>
      <div id='txt4' draggable="true" class="dragable txt txt4">可移动的文字四</div>
      <div id='txt5' draggable="true" class="dragable txt txt5">可移动的文字五</div>
    </div>
    <div class="right" id='right'>
      <div class="txt-show">右边区域</div>
    </div>
  </main>

  <script>
    let txtObj = document.getElementsByClassName('txt')
    for (let i = 0; i < txtObj.length; i++) {
      txtObj[i].ondragstart = handle_start
      txtObj[i].ondrag = handle_drag
      txtObj[i].ondragend = handle_end
    }

    function handle_start(e) {
      e.dataTransfer.setData('Text', e.target.id)
      console.log('handle_start-拖动开始')
    }

    function handle_drag(e) {
      console.log('handle_drag-拖动中')
    }

    function handle_end(e) {
      console.log('handle_end-拖动结束')
    }
    let target = document.getElementById('right')
    target.ondragenter = handle_enter
    target.ondragover = handle_over
    target.ondragleave = handle_leave
    target.ondrop = handle_drop

    function handle_enter(e) {
      e.preventDefault()
      console.log('handle_enter-进入目的地')
    }

    function handle_over(e) {
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      console.log(returnObj + '-handle_over-在目的地范围内')
    }

    function handle_leave(e) {
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      console.log(returnObj)
      console.log('handle_leave-没有放下就离开目的地')
    }

    function handle_drop(e) {
      e.stopPropagation(); // 不再派发事件。解决Firefox浏览器，打开新窗口的问题。
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      if (returnObj) {
        e.target.appendChild(document.getElementById(returnObj))
      }
      console.log(returnObj + '-handle_drop-在目的地区释放')
    }
  </script>
</body>

</html>

前端砖家

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手写一个拖拽

手写一个拖拽原声js实现拖拽需要三大事件：mousedown 鼠标按下事件mousemove 鼠标移动事件mouseup 鼠标抬起事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫