前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >dragenter 和 dragleave 原

dragenter 和 dragleave 原

作者头像
申君健
发布2018-09-21 09:58:14
8620
发布2018-09-21 09:58:14
举报
文章被收录于专栏:前端侠2.0

今天在做一个文件上传的功能!其它主要功能都很容易实现,最后却卡在一个地方: 我希望文件拖到指定的区域后,该区域能加亮,背景变色一下,离开后恢复。DOM结构类似于下面:

代码语言:javascript
复制
<div class="wrapper">
    <div class="tools">
          一些button
    </div>
    <div class="filestable">
          一个table
    </div>
</div>

我希望在dragenter 到wrapper后,给它增加一个class样式,在dragleave  wrapper后,再移除这个样式。  实际情况: 当拖入到wrapper后,再向外出来wrapper区域,整个过程是正常的。 但是当拖入到wrapper后,再向内进入 tools 或filestable等区域时,也会触dragleave事件。

难点是:在dragleave事件中,仅通过event,很难判断它到底是向内进入了子元素,还是向外离开整个区域了。

晚上回到家,想到原来用过的百度webuploader插件,去看一下它是怎么实现的吧!先看一下DEMO,

明显,它的外层div中,也有两个内部元素,事件也是绑定在最外层的。所以必须面临和我一样的问题!

找一下它的事件,删除了很多代码后:

代码语言:javascript
复制
 _dragEnterHandler: function( e ) {
     me.elem.addClass( prefix + 'over' );
}

_dragOverHandler: function( e ) {
     clearTimeout( this._leaveTimer );
     this._dragEnterHandler.call( this, e );
},
    
_dragLeaveHandler: function() {
     var me = this,handler;
     handler = function() {
          me.dndOver = false;
          me.elem.removeClass( prefix + 'over ' + prefix + 'denied' );
      };
    
      clearTimeout( me._leaveTimer );
      me._leaveTimer = setTimeout( handler, 100 );
      return false;
 },

一切的技巧都在dragleave中,写了一个延时函数,在这个事件中,不立即清除样式类。如果之后还有dragover事件的话,表明这个leave后,进入内部元素了,那这个延时函数就不执行了。代码很简单易懂!

唯一不懂是:为什么在dragover事件中,还要重复调用一下 ._dragEnterHandler. 呢??目的何在?

最后看一下它是如何绑定事件的吧!

代码语言:javascript
复制
        function bindFn( fn, context ) {
            return function() {
                return fn.apply( context, arguments );
            };
        }
                this.dragEnterHandler = Base.bindFn( this._dragEnterHandler, this );
                this.dragOverHandler = Base.bindFn( this._dragOverHandler, this );
                this.dragLeaveHandler = Base.bindFn( this._dragLeaveHandler, this );
                this.dropHandler = Base.bindFn( this._dropHandler, this );
                this.dndOver = false;
    
                elem.on( 'dragenter', this.dragEnterHandler );
                elem.on( 'dragover', this.dragOverHandler );
                elem.on( 'dragleave', this.dragLeaveHandler );
                elem.on( 'drop', this.dropHandler );
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/06/13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档