HTML5 拖拽

最新推荐文章于 2023-10-14 12:41:19 发布

drunk喵咪

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量118

点赞数

分类专栏： HTML Javascript 文章标签： html5

本文链接：https://blog.csdn.net/jdrunk/article/details/112802289

版权

Javascript 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

可拖拽元素

<div  draggable='true' ondrag="handleDrag">1</div>

ondrag拖拽开始时，可存放拖拽数据，例如元素ID

可放置区域

<div  ondragover='handleDragover' ondrop="handleDrop"></div>

同时要设置e.preventDefault()
ondragover进入放置区域，可进行更改样式等操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽2</title>
    <style type="text/css">
        body{
            height: 600px;
            border: 1px solid green;
        }
        .top,.bottom{
            height: 150px;
            border: 1px solid red;
            margin: 10px;
        }
        .child{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var top = document.getElementsByClassName('top')[0]
            var bottom = document.getElementsByClassName('bottom')[0]
            // 类数组对象
            var childs = document.getElementsByClassName('child')
             childs = Array.from(childs)
            // dragstart,拖放元素上面
            function ds(event){
                // 保存拖放元素的id
                var dt = event.dataTransfer;
                dt.setData('id',this.id)
            }
            // dragover
            function dv(event){
                event.preventDefault()
            }
            // drop
            function dr(event){
                // 获取dataTransfer中存储的id
                var dt = event.dataTransfer;
                var id = dt.getData('id')
                var dom = document.getElementById(id)
                this.appendChild(dom)
                event.stopPropagation()
            }
            childs.forEach(function(item){
                item.ondragstart = ds
            })
            top.ondragover = dv
            top.ondrop = dr
            bottom.ondragover = dv
            bottom.ondrop = dr
            document.body.ondragover=dv
            document.body.ondrop = dr
        }
    </script>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></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>
</html>

在这里插入图片描述
在react项目中使用拖放，实现图片位置交换功能

import React from 'react';
// import styles from './index.less';

const Index = props => {
  const { imgaeList } = props;
  let item: any = null;
  let lastX: any = null;

  const drag = (e: any) => {
    console.log(e, 'index')
    item = e.target;
    // item.style.backgroundColor = 'blue';
    lastX = e.clientX;
    e.dataTransfer.setData('Text', item.id);
  };
  const dragEnter = (e: any) => {
    console.log(e, 'index11')
    e.preventDefault();
    if (e.clientX > lastX) {
      e.target.after(document.getElementById(item.id));
    } else {
      e.target.before(document.getElementById(item.id));
    }
    lastX = e.clientX;
  };
  const drop = (e: any) => {
    console.log(e, 'index1')
    const aa = document.getElementById('wrap')
    console.log(aa, 'index-deom')
    //将改变位置后的dom传给父组件
    props.getDom(aa)
    e.preventDefault();
    const data = e.dataTransfer.getData('Text');
    // if (e.clientX > lastX) {
    //   e.target.after(document.getElementById(data));
    // } else {
    //   e.target.before(document.getElementById(data));
    // }
    // item.style.backgroundColor = 'red';
    item = null;
    lastX = null;
  };
  const allowDrag = (e: any) => {
    e.preventDefault();
  };

  return (
    <div id="wrap" onDrop={drop} onDragOver={allowDrag}>
      {
        imgaeList.map((item, index) => {
          return <img src={item.src} alt="" key={index} id={item.name + index} onDragStart={drag} onDragEnter={dragEnter} width={50} height={50} draggable />
        })
      }
    </div>
  );
};
export default Index;

  //获取dom
  const getData = () => {
    const tempArr: any = []
    let dom = document.getElementsByClassName('img')
    if (dom) {
      for (let i = 0; i < dom.length; i++) {
        tempArr.push(Number(dom[i].getAttribute('id')))
      }
    }
    return tempArr
  }

drunk喵咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽2</title> <style type="text/css"> body{ height: 600px; border: 1px solid green; }
复制链接

扫一扫