EasyUI商品拖拽购物车前端示例
EasyUI 的商品展示页面，配合 jQuery 写的拖拽功能，蛮实用的。项目用的是 EasyUI 自带的draggable和droppable，不需要额外引库，挺方便。商品卡片一拖进购物车，交互就做出来了，体验也还不错。
项目结构也比较清晰，index.html负责页面结构，style.css管样式，逻辑都写在几个.js文件里。比如商品信息加载，一般用 AJAX 拉 JSON 数据，再配合 EasyUI 的datagrid或listbox组件来展示，样式清爽，响应也快。
拖拽逻辑也不复杂，直接用$(...).draggable()配合$(...).droppable()就搞定，绑定下onDrag、onDrop事件，再加点动画效果，交互细节就出来了。你还可以配合localStorage存点用户数据，体验再升级。
浏览器兼容性这块也不用太担心，jQuery 打底的，老一点的浏览器也能跑，记得用事件委托优化下拖放的监听，不然元素多了会卡。，这套代码蛮适合做个商品小店 demo 练练手，动静结合的那种。
如果你正想练习EasyUI和jQuery的结合玩法，可以先从这个项目下手，逻辑简单，交互有趣，上手也快。
文件大小：64.46KB
评论区