easy

DocsVersion : 0.1.0

Drop 拖放组件

Define in : drop.js

与拖拽元素对应,拖放组件用于将拖拽元素放置到拖放元素中。

Drop( target, [ options ] )

依赖
JS : 依赖 Drag 组件
CSS : 不依赖
HTML : 不固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅对第一个匹配元素进行拖放绑定。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
accept String *

设置拖放元素仅接受符合基本选择器匹配的拖拽元素,只能是基本选择器。

mode String pointer

拖拽元素和拖放元素相交的模式。

intersect 拖拽元素的边界和拖放元素的边界有接触。

pointer 拖拽时的鼠标指针和拖放元素有接触。

strict 拖拽元素完全进入拖放元素的内部。

方法
  • destroy

    销毁拖放实例。

  • on

    对拖放实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载拖放实例的事件。该方法接受1个需要卸载的事件类型的参数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
drop

拖拽元素与拖放元素相交的过程中拖拽结束,此时触发的事件。

event.drag 拖拽元素本身。

event.drop 拖放元素本身。

event.target 拖放元素本身。

dropenter

拖拽元素与拖放元素开始相交触发的事件,类似于 mouseenter 的触发机制。

event.drag 拖拽元素本身。

event.drop 拖放元素本身。

event.target 拖放元素本身。

dropexit

拖拽元素与拖放元素相交后又分离时触发的事件,类似于 mouseleave 的触发机制。

event.drag 拖拽元素本身。

event.drop 拖放元素本身。

event.target 拖放元素本身。

dropover

拖拽元素与拖放元素开始相交过程中持续触发的事件,类似于 mousemove 的触发机制。

event.drag 拖拽元素本身。

event.drop 拖放元素本身。

event.target 拖放元素本身。

在使用 Drop 组件前,对其进行加载。

E.use( 'drop', function(){
    // 在回调中实例化拖放
});
例子1

对 box1、box2 绑定拖拽,box3 绑定拖放,box3 仅接受 box1 的放置,对 box3 绑定相应的事件,让 box1 可以 append 到 box3 中,同时销毁 box1 的拖拽实例。

box1
box2
box3
var drop = new E.ui.Drop( '#box3', {
    accept : '#box1'
});

var drag1 = new E.ui.Drag( '#box1', {
    refresh : false
});

new E.ui.Drag( '#box2', {
    refresh : false
});

    // 进入
drop.on( 'dropenter', function( e ){
        E( e.drop ).css( 'backgroundColor', '#eee' );
    })
    // 离开
    .on( 'dropexit', function( e ){
        E( e.drop ).css( 'backgroundColor', '#fff' );
    })
    // 放置
    .on( 'drop', function( e ){
        E( e.drop ).css( 'backgroundColor', '#c2ebfe' )
            .append( e.drag );
            
        drag1.destroy();
    });