hooks手动实现拖拽组件
App.js组件
import React from "react";
import './App.css';
import useDraggable from './useDraggable';
// 数据源
const list = [
{
src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3942751454,1089199356&fm=26&gp=0.jpg',
title: '图片1'
},
{
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604224186531&di=528125c9c6c2ab7f5dd0f4f108704408&imgtype=0&src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201306%2F26%2F20130626161523_zw25t.jpeg',
title: '图片2'
},
{
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604224186529&di=31915ae6ab56c476bd2308e1e320c76f&imgtype=0&src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201301%2F20%2F20130120171927_KaevQ.jpeg',
title: '图片3'
}
];
//处理样式
function cls(def, ...conditions) {
const list = [def];
conditions.forEach(cond => {
if (cond[0]) {
list.push(cond[1]);
}
})
console.log(list);
return list.join(' ')
}
// 默认导出组件
export default function App() {
return (
<div className='App'>
<DraggableList list={
list} />
</div>
)
}
function DraggableList({
list }) {
const {
dragList, createDropperProps, createDraggerProps } = useDraggable(list);
console.log(dragList);
return dragList.map((item, i) => {
if (item.type === 'BAR'