Drop demo #view docs


例子1

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

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

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

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

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