2019-03-15 文件拖拽移动

拖拽移动的效果

期望效果：拖拽文件移动文件位置（相当于剪切），且拖拽过程中目标文件有背景样式。类似于windows的桌面拖拽


部分代码

每个文件都由li组成  把拖拽事件绑定在了li上面，使用的h5 drag和drop事件完成， 首先根据权限判断该元素是否可拖拽 ，通过draggable为true或false 实现。


具体代码



具体代码



数据结构



存在的问题： 禁止拖拽后，因为li层级深，好像是图片的自带拖拽功能，还是可以拖拽，draggable=false后，偶尔还是可以拖动，执行dragstart事件，这个问题尚未解决，希望有经验的小哥哥小姐姐们能分享一下解决方案。 可能还有其他问题，简单分享

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器常用事件解析
    之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 5,568评论 0赞 0
  • H5 笔记
    H5 meta详解 viewport width：控制 viewport 的大小，可以指定的一个值，如果 600，...
    FConfidence阅读 4,249评论 0赞 3
  • 十五、HTML5 脚本编程
      HTML5 规范了很多新 HTML 标记。为了配合这些标记的变化，HTML5 规范也用显著篇幅定义了很多 Ja...
    霜天晓阅读 3,984评论 0赞 1
  • html5新特性
    1.htm5新特性 1.语义化标签 1.1.htm5新特性 1.2.新选着器### 1.3 获取class列表属性...
    believedream阅读 3,567评论 0赞 0
  • 抱孙
    1933年老舍先生写了一篇短文，《抱孙》。 短短半小时能读完的文章，读罢却能让人满心痛恨，情绪波澜起伏不能自已。先...
    江客阅读 4,479评论 0赞 1