react实现图片拖放

问题描述

我想在react实现图片的拖放。如下:
假设有4张图片，排序为1234。
那么我把编号为4的图片移到1和2之间或者编号为2的图片上，就变成了1423。
图片描述

问题出现的环境背景及自己尝试过哪些方法

我想要用html5中的拖放事件实现，但是怎么想都觉得拖放需要操作dom与react数据驱动视图相斥。
想到这个应该是拖动排序，那么问题是，如何知道图片移动到的位置。
目前的要求：

不要使用其他组件，纯react.js实现
代码越少越好
只要求实现图片移动
无需考虑兼容性

Thanks.

阅读 4.9k

使用HTML5的拖放事件实现就可以啦,最重要的是搞清拖放事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片拖拽互换</title>
    <style>
      img {
        width: 200px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <script type="text/babel">
      class Page extends React.Component {
        constructor() {
          super();
          this.state = {
            pic: [
              {
                id: 1,
                src: './pic/1.jpg'
              },
              {
                id: 2,
                src: './pic/2.jpg'
              },
              {
                id: 3,
                src: './pic/3.jpg'
              }
            ]
          };

          this.dragStart = this.dragStart.bind(this);
          this.allowDrop = this.allowDrop.bind(this);
          this.drop = this.drop.bind(this);

          //  移动的图片的index
          this.movedPicIndex = -1;
          //  移入的区域的index
          this.movedInIndex = -1;
        }
        /**
         * 点击图片的那一刻
         * 获取要移动的图片id
         */
        dragStart(index, e) {
          this.movedPicIndex = index;
        }
        // 设置允许放置图片，默认不允许的
        allowDrop(e) {
          e.preventDefault();
        }
        /**
         * 松开鼠标的那一刻
         * 获取图片移动到的图片位置
         */
        drop(index, e) {
          e.preventDefault();
          this.movedInIndex = index;
          const picData = this.swapPic(this.movedPicIndex, this.movedInIndex);
          this.setState({
            pic: picData
          });
        }
        /**
         * 互换图片
         */
        swapPic(fromIndex, toIndex) {
          let picData = [...this.state.pic];
          [picData[fromIndex], picData[toIndex]] = [picData[toIndex], picData[fromIndex]];
          return picData;
        }
        render() {
          return (
            <div>
              {this.state.pic.map((item, index) => {
                return (
                  <div
                    key={item.id}
                    draggable={true}
                    onDragStart={e => this.dragStart(index, e)}
                    onDragOver={this.allowDrop}
                    onDrop={e => this.drop(index, e)}
                  >
                    <img src={item.src} />
                  </div>
                );
              })}
            </div>
          );
        }
      }
      const app = document.getElementById('app');
      ReactDOM.render(<Page />, app);
    </script>
  </body>
</html>

react实现图片拖放

问题描述

问题出现的环境背景及自己尝试过哪些方法

Thanks.

你尚未登录，登录后可以

Next.js做纯前端是否可行？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

如何处理 npm 包依赖的依赖？

对于git的使用不解，还望解答，万分感谢！？

next.js ssr编写组件的正确姿势？

请问 react 什么情况下你会将组件分到一个文件中，什么情况组件写在同一个文件中？