H5中拖拽和释放（drag和drop）

最新推荐文章于 2023-06-09 00:26:03 发布

a浮云

最新推荐文章于 2023-06-09 00:26:03 发布

阅读量1k

点赞数 3

分类专栏： drag和drop的应用文章标签： html5 javascript

本文链接：https://blog.csdn.net/you_very_brave/article/details/117049342

版权

drag和drop的应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

练习将body下的五个div标签拖拽到一个class为parent的div中
再然后又将div盒子拖拽到body中

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽</title>
  <style>
    body{
      width: 100%;
      height: 100%;
      float: left;
    }
    .parent {
      width: 500px;
      height: 200px;
      border: 1px solid teal;
    }
    .child {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid salmon;
      float: left;
      margin: 10px 10px;
    }
  </style>
</head>
<body>
  <div class="parent"></div>
  <div class="child" id="one" draggable="true">1</div>
  <div class="child" id="two" draggable="true">2</div>
  <div class="child" id="three" draggable="true">3</div>
  <div class="child" id="four" draggable="true">4</div>
</body>
<script>
  window.onload = function(){
    var parent = document.getElementsByClassName('parent')[0];
    var childs = document.querySelectorAll('.child');
    // console.log(parent)
    childs = Array.from(childs) //类数组转数组
    // console.log(childs)
    childs.forEach(function(item,index){
      item.ondragstart = function(event){
        var id = item.id;
        event.dataTransfer.setData('id',id);
        // console.log(event.dataTransfer.getData('id'))
        console.log('我开始在被拖拽')
      }
      item.ondrag = function(){
        console.log('拖拽过程中')
      }
      item.ondragend = function(){
        console.log('拖拽结束')
      }
    })

    parent.ondragenter  = function(){
      // console.log('子元素进入')
    }
    parent.ondragover  = function(event){
      // console.log('子元素在父元素中移动')
      event.preventDefault();
    }
    parent.ondrop  = function(event){
      var id = event.dataTransfer.getData('id');
      // console.log(id)
      var dom = document.querySelector('#'+id);
      this.appendChild(dom);
      // console.log('子元素放进父元素')
      // console.log(dom.parentNode)
      event.stopPropagation();//阻止事件冒泡
      event.preventDefault()

    }

  //  console.log(document.body)

    document.body.ondragenter = function(event){
      // console.log('进入body')
      event.preventDefault();
    }
    document.body.ondragover = function(event){
      // console.log('移动')
      event.preventDefault();
    }
    var body = document.body
    body.ondrop = function(event){
      var id = event.dataTransfer.getData('id');
      console.log(id);
      var dom = document.querySelector('#'+id);
      
      body.appendChild(dom);
      // console.log('body')
     event.stopPropagation();//阻止事件冒泡
      // event.preventDefault()
    }


  }
</script>
</html>

a浮云

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5中拖拽和释放（drag和drop）

练习将body下的五个div标签拖拽到一个class为parent的div中再然后又将div盒子拖拽到body中代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
复制链接

扫一扫