详解有关easyUI的拖动操作中droppable，draggable用法例子

2024-02-21 13:28:02 53

vartab=[]; $('.itemsli').draggable({ proxy:'clone', revert:true }); //级联统计指标放置区 $('.target-cascade').droppable({ onDragEnter:function(e,source){ $(this).css('border','1pxsolidred'); }, onDragLeave:function(e,source){ $(this).css('border','1pxsolidblack'); }, onDrop:function(e,source){ //判断拖动的元素是否存在于放置区内 if($(source).draggable('options').proxy==='clone'){ //禁用拖动 NotDrag(source); //将拖入元素的原位置记录下来 varbuttonName=$(source).find('span').html(); console.log("--------"+$(source).index()); tab[buttonName]=$(source).index();//返回指定元素相对于其他元素的位置（0,1等）,如果没有找到，则返回-1 varEle=$(''); Ele.appendTo('.target-cascadeul'); } $(this).css('border','1pxsolidblack'); //拖动放置区内的元素 $(this).find('button').draggable({ revert:true, onStopDrag:function(e){ var_index=tab[$(this).html()]; $(this).parent().remove(); $('.itemsli:eq('+_index+')').draggable('enable'); $('.itemsli:eq('+_index+')').find('i').css('backgroundColor','red'); } }); } }); //列指标放置区 $('.target-column').droppable({ onDragEnter:function(e,source){ $(this).css('border','1pxsolidred'); }, onDragLeave:function(e,source){ $(this).css('border','1pxsolidblack'); }, onDrop:function(e,source){ //判断拖动的元素是否存在于放置区内 if($(source).draggable('options').proxy==='clone'){ //禁用拖动 NotDrag(source); varbuttonName=$(source).find('span').html(); tab[buttonName]=$(source).index(); varEle=$(''); Ele.appendTo('.target-columnul'); } $(this).css('border','1pxsolidblack'); //拖动放置区内的元素 $(this).find('button').draggable({ revert:true, onDrag:function(e){ $(e.data.parent).find('select').hide(); }, onStopDrag:function(e){ var_index=tab[$(this).html()]; $(this).parent().remove(); $('.itemsli:eq('+_index+')').draggable('enable'); $('.itemsli:eq('+_index+')').find('i').css('backgroundColor','red'); $(e.target).siblings('select').show(); } }); } }); //禁止拖动 functionNotDrag(source){ $(source).draggable('disable');//禁用拖动动作 $(source).find('i').css('backgroundColor','grey'); }

详解有关easyUI的拖动操作中droppable，draggable用法例子

热门推荐

随机推荐