IE9+使用drag拖动更爽

ernest.wang 发布于2019-08-20 11:57 / 1353人阅读

摘要：在没有事件的时候，做元素拖拽使用的都是事件，但在处理过程中可能有这样或那样的问题，主要还是感觉不流畅，如果小伙伴们不在考虑低版本的话，可以偿试一下，会有意想不到的收获。。

在没有drag事件的时候，做元素拖拽使用的都是mouse事件，但mouse在处理过程中可能有这样或那样的问题，主要还是感觉不流畅，如果小伙伴们不在考虑低版本IE(

下面来展示下drap的主要事件

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

dataTransfer对象(了解就行了)：

dropEffect 设置放下效果（copy move link none）

effectAllowed 允许的效果 (copy move link copyLink copyMove linkMove all
none uninitialized(默认值，等同于all))

files FileList对象

setDragImage()

setData()

getData()

clearData()

演示效果

HTML:


    
        标题一
        标题二
        标题三
        标题四
        标题五

JS:

在dragover和drop环节上阻止默认事件(e.preventDefault())是少不了的，，不信的少侠可以尝试一下，以来印证老夫所言非虚。。。哈哈哈，偏偏然，隐身山林中……

控制台打印

示例

完整代码




    
    拖动
    
    


    
    
    
        
        1天天向上1
        2天天向上22
        3天天向上333
        4天天向上4444
        5天天向上55555
        6天天向上666666
        7天天向上7777777
        8天天向上88888888
        9天天向上999999999

最后向大家推荐一个拖动插件 http://dragsort.codeplex.com/ 用过感觉还不错

GPU云服务器云服务器 Drag dom-drag ie9崩溃 ie9 无响应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80722.html

使用 Drag and Drop 给Web应用提升交互体验

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览...

legendmohe 2019-08-02 12:03 评论0 收藏0
拖放排序插件Sortable.js

摘要：介绍是一款轻量级的拖放排序列表的插件虽然体积小，但是功能很强大下载地址官方特点支持触屏设备和大部分浏览器以下的就不支持了，原因都懂得可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序移动列表单元时有动画支持拖放操作和可选择介绍 Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）下载地址：https://github.com/Ru...

tomorrowwu 2019-08-20 13:59 评论0 收藏0
拖动中的味道

摘要：内容不可被拖动。指定一个元素拖动发生时显示在光标下方，三个参数分别是要显示的元素和光标在显示元素中的坐标。返回被拖放文件的对象。返回事件中传递的数据类型的类似数组的集合。拖~ 在js里面关于拖这个概念是完全没有的(except h5). 以前只能造一大堆的轮子，比如使用mousedown + mousemove + mouseup. 这3个事件结合起来实现复杂的UI操作。现在，h5...

468122151 2019-08-19 17:19 评论0 收藏0