Web开发中的Drag&Drop完全手册

       这几天做了一些drag&drop操作方面的工作，在这里把一些注意事项记录下来，算是给自己备个忘，也给需要做类似工作的人留个树阴。这里要讨论的drag&drop是指使用IE提供的内置机制，而不是使用鼠标模拟的那种"假"drag&drop，比如移动一个div或span的效果那种。

      要实现和控制drag&drop操作，那么首先第一点要弄清楚的是，到底哪些元素是可以在Web上被drag的？实际上IE给我们并让我们drag的元素并不多，它们是：图片、选中的文字（包括页面文字和文字控件(input, textarea)中的文字）和连接（普通连接和锚点）。除此之外，别的Web元素都不支持drag操作（在这些元素上面drag其实就是选择操作了），所以要实现drag&drop控制，只能选这3类元素来操作。

       接下来，那么哪些元素又是可以接受drop操作呢？任何页面上的可见元素都是可以接受drop操作的，而它们之间的不同只是在于默认的drop事件不一样。比如，文字控件(input, textarea)的默认drop事件就是获取drag操作传过来的文字内容；iframe元素的默认drop操作是到航道drag操作传过来的URL地址。当然绝大多数的Web元素的默认是操作是do nothing，什么也不做。

       那么当进行drag&drop操作时，有那些是可控制和定制的内容呢？这里关于drag&drop提供了以下一些事件（我们把它们分为作用于来源对象和目的对象来分别讨论），先讨论主要作用于来源对象的事件：
   ·ondrag —— 在整个从drag动作开始，直道drop动作结束的过程中，都会触发的一个事件。
   ·ondragstart —— 在drag动作开始时，在来源对象上触发的一个事件。
   ·ondragend —— 在drop动作结束的时候，在来源对象上出发的一个事件。

       而主要做要在目的对象上的事件：
   ·ondragenter —— 在drag动作进入某一有效目的元素时，在该目的元素上触发的一个事件。
   ·ondragover —— 在drag动作进入某一有效目的元素后，在该目的元素上触发的一个事件。
   ·ondragleave —— 在drag动作离开某一有效目的元素时，在该目的元素上触发的一个事件。
   ·ondrop —— 在任何有效目的元素上进行drop操作时，在该目的元素上触发的一个事件。

       这里的来源和目的的划分不是绝对的，比如ondragover事件，在drag操作过程中，如果鼠标进入了来源对象中，同样的也会触发这个事件。这些事件触发的顺序是：来源对象 --> ondragstart --> ondrag --> ondragend；目的对象 --> ondragenter --> ondragover --> ( ondragleave | ondrap )。由于是分别在同一个对象上触发的事件，所以这个顺序很简单。那么对于一个完整的从来源对象到目的对象的drag&drop操作来说，事件的触发序列又是如何呢？如果src表示来源对象，des表示目的对象，那么事件触发序列为：

       src:ondragstart --> src:ondrag --> des:ondragenter --> des:ondragover --> ( des:ondragleave | des:ondrop ) --> src:ondragend.

    示例为：Drag Source Drop Destination
    // 如果alert窗口不响应鼠标点击可以使用键盘的space键来确定窗口

       了解了事件触发顺序后，定制drag&drop过程中鼠标的光标形状也是非常重要的一个内容。因为用户的drag&drop的整个过程都需要靠鼠标光标的形状指导其进行操作，如果不能实时的调整光标为适合的型状，drag&drop操作对用户来说把无异于朦眼寻物。IE提供了用来控制的drag&drop过程中光标形状的两个属性，它们是：effectAllowed和dropEffect。

      其属性分别为：
        ·effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized.
        ·dropEffect: copy, link, move, none.

        前者effectAllowed是用来控制允许drag&drop操作类型的，所以这里的effect不是显示的"效果"，而是是否可以执行的"操作"，并且该属性只能在ondragstart事件中进行初始化，之后再对其赋值把无效。当然如果只使用effectAllowed属性，就已经可以达到控制光标形状的作用了。只是effectAllowed属性在处理复合操作时，比如copyLink, copyMove和all，会默认显示靠前那个操作类型的鼠标类型。也就是说如果effectAllowed是copyMove，那么这是鼠标光标就是copy形状。这下就知道为什么还要弄个dropEffect属性了吧？不过这个dropEffect属性中指定的effect，只能是之前effectAllowed允许的操作类型范围中的值，否则没有效果（显示no-drop鼠标光标）。
    
    示例为： Drag Source Drop Destination

       如果查看代码，会发现在src和des的对象元素中，在ondragover事件里除了对dropEffect赋以适当的值外，还有两句话：

 如果您对本文有任何疑问或者建议，请到讨论区发表您的意见: >> 论坛入口 <<

上一页12 下一页

上一篇： 巧用CSS改变鼠标的样式   下一篇： 完全用CSS实现的中英文双语导航菜单

【文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论】