探究H5拖放属性
明白吗？搞出基于数据驱动的网页渲染和拖动元素顺序就靠HTML5的拖放属性！要想让某个东西能被拖动，只需把draggable属性设成true就能搞定。然后，当你开始去拖动它，onDragStart事件就会出发，这还提供了一个好用的实用函数dataTransfer.setData()来帮你保存必要的信息。再来看看onDragOver事件，这个是告诉你现在拖动的东西能放在哪里，正常情况下，都会阻止继续往上冒泡。如果你拖着的东西滑进另一个能够接收它的地方，onDragEnter事件就会弹出，这样就能看到明显的挪进去的画面。等东西从一个地方挪到了另一个地方后，再一松手，onDragLeave事件就来提醒你，这时候就能知道什么时候是不是该去掉那个挪进去的画面咯。最后，当你把东西“啪”地往某处一扔 Chris伦式的时候，onDrop事件就来了。这时候，咱们就能处理数据，利用onChange方法对value值进行展示，告诉父组件我做到了~
React组件属性设计
对于React.js组件来说，我们可以把input属性命名为value，同时还要添加一个onChange事件，这样就可以实时监控value的变化！另外还要暴露一个sortKey属性，告诉组件要用哪个key进行排序。说到排序这个问题，我们建议使用数组形式的数据结构，因为这样允许我们自由设置每个元素内部的子组件。而且在这种情况下，每个元素可以有一个content属性，里面存放着它自己的“东西”，当然了，这个content是可以是reactNode类型的哟。
实现可排序组件
想要调整递交上来的价值 primal（首字母大写），我们需要知道如何变动每个 operate node（操作节点）的顺序。事实上，我们并没有手把手地变动DOM nodes的顺序，而是当 onDrop 这个动作发生时，我们就会自动对数据进行排序。此外，当它发生变化时，就会发出 onChange event（两事件不分大小写）通知父组件新的数据情况。而且，我们还会通过改变 value 的值来触发 virtual DOM（虚拟DOM，也是个大写，但多余）重新渲染整个页面，这样就能方便地掌控元素的顺序！
扩展功能：拖拽复制
咱们这个解决方案，可不止是简单拉个拖把就能排序！还有个超贴心的玩意儿就是能让你把数据拖过去再随手就复制！这可是根据你们公司的需求量身定做滴！通过调整和扩展一些东西，让小细节更有趣儿，让你们用得顺手又方便。这样一来，既提高了大家的使用感，又让我们的产品更加灵活好用咯～
兼容性考量
别忘了4个字——不同浏览器。开发时别忘了考虑不同时期、不同款式的浏览器对HTML5拖动功能的适应性。虽然这篇文章没聊怎么兼容那些像IE8这样的老古董浏览器，但在真正做项目时，可能还是得根据具体的浏览器版本调整，才能保证程序不出问题！
性能优化与交互体验
除了搞定功能，咱们还得特别注意性能优化和用户体验！比如搞个好的数据结构设计，减小无用的重排重绘次数，以及把代码弄得更顺溜些，这样就能帮网页加载更快，用户体验更好了。
安全性考虑
咱们开发时要特别小心那些会威胁系统安全的事件，比如跨站脚本（XSS）、跨站请求伪装（CSRF）这些，凡是跟数据有关的部分都得进行严谨检查并做好防护工作，这样才能确保系统稳当妥当地运转。
社区资源与学习建议
value: [
{
content: 'p1',
code: '01',
sort: 0,
},
{
content: 'p2',
code: '02',
sort: 1
},
{
content: 'p3',
code: '03',
sort: 2
},
{
content: 'p5',
code: '05',
sort: 5
},
{
content: 'p4',
code: '04',
sort: 4
}]
关于React.js的开发技术和H5的拖放属性，建议你能多看看官方文档、社区论坛、技术博客等等这些地方，里面会有很多有用的信息。其实学得好不好还得看实践，所以别只顾着理论知识，要多动手去读源代码、参加讨论还有做真正的项目应用，这样才能真正提高自己的技术水平。同时，在开发过程中有时候难免会遇到各种问题，这时候别慌张，多找找解决办法，慢慢的你就能保证自己在技术道路上稳步前进！
总结与展望
这次咱就来聊聊如何用H5和React做个拖拽排序组件呗！不仅如此，咱们还得让它支持拖拽复制的功能。平时开发当中，要学会巧妙运用HTML5的各种牛逼功能，再结合React那灵活的框架，复杂的交互效果轻松搞定！我看将来前端技术肯定是越来越先进，前端开发也会变得越来越有意思哦～
// 生成拖拽组件
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)}
)
}
希望这篇文章能给你一些小灵感，让你用H5玩转React组件更顺利。
// 拖动事件
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;
}
return 0
}
}
// 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
drop(dropedSort, data, sortKey, ee) {
ee.preventDefault();
const code = ee.dataTransfer.getData("code");
const sort = ee.dataTransfer.getData("sort");
if (sort {
if (item.code === code) {
item[sortKey] = dropedSort;
} else if (item[sortKey] > sort && item[sortKey] {
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();
}
评论0