dragdrop-component

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

Usage no npm install needed!

<script type="module">
  import dragdropComponent from 'https://cdn.skypack.dev/dragdrop-component';
</script>

README

DragDrop是什么?

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

安装

npm install dragdrop-component

使用

const {Drag, Drop} = 'dragdrop-component';
....
 <div className="App">
            <Drag className='drag'>123</Drag>
            <Drop className='drop'
                  onDrop={(e) => {
                     console.log(e)
                  }}
            >444</Drop>
            <Drop className='drop parent'>
                <Drop className='drop2'
                      onDrop={(e) => {
                          //e.stopPropagation()
                      }}
                      onDropOver={(e)=>{
                        //这里可以从e中拿到toElement 和fromElement 对拖动后放置的位置进行自定义 比如   e.formElement.insertBefore(e.toElement,e.formElement.childNodes[1]);
                      }}
                ><span>55</span></Drop>
            </Drop>
        </div>

有问题反馈

在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流

  • 邮件(robertpanvip@163.com)

关于作者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。