H5拖放 (简单学习demo)

最新推荐文章于 2024-06-18 14:38:23 发布

ivanfor666

最新推荐文章于 2024-06-18 14:38:23 发布

阅读量77

点赞数 1

分类专栏： HTML 文章标签：学习前端 html

本文链接：https://blog.csdn.net/qq_36411712/article/details/137235499

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        h2 {
            font-size: 20px;
            color: gray;
        }
 
        div#left,
        div#right {
            width: 120px;
            height: 300px;
            float: left;
            margin: 10px 100px 10px 0px;
            border: 1px solid #000;
            overflow-y: auto;
        }
 
        div label {
            font-size: 22px;
            font-weight: bold;
            width: 100%;
            display: inline-block;
            padding: 4px 0;
            text-align: center;
            margin: 0px 0 2px 0;
            color: #fff;
            background-color: gray;
        }
    </style>
</head>
 
<body>
    <div>
        <h2>H5拖放</h2>
        <!-- 左边元素框 -->
        <div id="left">
            <label draggable="true">A</label>
            <label draggable="true">B</label>
            <label draggable="true">C</label>
            <label draggable="true">D</label>
            <label draggable="true">E</label>
        </div>
        <!-- 右边元素框 -->
        <div id="right"></div>
    </div>
 
    <script>
      const right = document.getElementById('right')
      const left = document.getElementById('left')

      right.ondragover=(ev)=>{
        ev.preventDefault();  //阻止向上冒泡
        ev.stopPropagation();
      }
      right.ondrop=(ev)=>{
        const val = ev.dataTransfer.getData('Text');
        console.log('right ondrop',val,ev.target.id)
        const child = document.getElementById(val)
        if(ev.target.id==='right'){

          if(right.contains(child)){
            console.log('是自身的子标签,末尾追加')
          }else{
            console.log('不是自身的子标签,末尾追加')
            right.append(child)
          }
        }else{
          console.log('位置调动',right.contains(child))
          if(right.contains(child)){
            console.log('是自身的子标签')
            right.insertBefore(document.getElementById(ev.target.id),document.getElementById(val))
          }else{
            console.log('不是自身的子标签')
            right.append(child)
          }
        }
      }

      
      left.ondragover=(ev)=>{
        ev.preventDefault();  //阻止向上冒泡
        ev.stopPropagation();
      }

      left.ondrop=(ev)=>{
        const val = ev.dataTransfer.getData('Text');
        console.log('left ondrop',val,ev.target.id)
        const child = document.getElementById(val)

        if(ev.target.id==='left'){

          if(left.contains(child)){
            console.log('是自身的子标签,末尾追加')
            left.append(child)
          }else{
            console.log('不是自身的子标签,末尾追加')
            left.append(child)
          }
        }else{
          console.log('位置调动',left.contains(child))
          if(left.contains(child)){
            console.log('是自身的子标签')
            left.insertBefore(document.getElementById(ev.target.id),document.getElementById(val))
          }else{
            console.log('不是自身的子标签')
            left.append(child)
          }
          
        }
      }

      const labels = document.getElementsByTagName('label')
      Array.prototype.slice.call(labels).forEach((element,i) => {
        const arr = ['A','B','C','D','E']
        element.id = arr[i]
        
        element.ondragstart = (ev)=>{
          console.log(arr[i])
          ev.dataTransfer.setData("Text", arr[i]);
        }
      });
    </script>
 
</body>
 
</html>