基于Html5实现的react拖拽排序组件示例HTML5实现拖拽互动改变元素颜色特效html5拖拽应用记录及注意点HTML5拖拽功能实现的拼图游戏html5 拖拽及用 js 实现拖拽功能的示例代码

 value: [ { content: 'div1', code: '01', sort: 0, }, { content: 'div2', code: '02', sort: 1 }, { content: 'div3', code: '03', sort: 2 }, { content: 'div5', code: '05', sort: 5 }, { content: 'div4', code: '04', sort: 4 }] 

 // 生成拖拽组件 createDraggleComponent(data, sortKey, style, uId) { return data.sort(this.compare(sortKey)).map((item) => { return ( 
{item.content}
 ) }) } render() { const { value, sortKey, style } = this.props; return ( 
 {this.createDraggleComponent(value, sortKey, style)}  ) } 

 // 拖动事件 domdrugstart(sort, code, ee) { ee.dataTransfer.setData("code", code); ee.dataTransfer.setData("sort", sort); } // 拖动后鼠标进入另一个可接受区域 dragenter(ee) { ee.target.style.border = '2px dashed #008dff'; ee.target.style.boxShadow = '0 0 8px rgba(30, 144, 255, 0.8)'; } // a拖到b，离开b的时候触发 dragleave(ee) { ee.target.style.border = '1px solid grey'; ee.target.style.boxShadow = ''; } // 对象排序 compare(key) { return (obj1, obj2) => { if (obj1[key] < obj2[key]) { return -1; } else if (obj1[key] > obj2[key]) { return 1; } return 0 } } // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时 drop(dropedSort, data, sortKey, ee) { ee.preventDefault(); const code = ee.dataTransfer.getData("code"); const sort = ee.dataTransfer.getData("sort"); if (sort < dropedSort) { data.map(item => { if (item.code === code) { item[sortKey] = dropedSort; } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) { item[sortKey]--; } return item; }); } else { data.map(item => { if (item.code === code) { item[sortKey] = dropedSort; } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) { item[sortKey]++; } return item; }); } this.props.onChange(data) } allowDrop(ee) { ee.preventDefault(); }