dragenter 和 dragleave

最新推荐文章于 2024-06-01 13:39:13 发布

weixin_34168880

最新推荐文章于 2024-06-01 13:39:13 发布

阅读量505

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1540190/blog/928145

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

<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中，也有两个内部元素，事件也是绑定在最外层的。所以必须面临和我一样的问题！

找一下它的事件，删除了很多代码后：

 _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. 呢？？目的何在？

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

        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 );

转载于:https://my.oschina.net/u/1540190/blog/928145