对 box1、box2 绑定拖拽,box3 绑定拖放,box3 仅接受 box1 的放置,对 box3 绑定相应的事件,让 box1 可以 append 到 box3 中,同时销毁 box1 的拖拽实例。
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(); });