详解有关easyUI的拖动操作中droppable,draggable用法例子
这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消
-----------以下为HTML
品类 工厂 跟高 跟型 单价 级联统计指标
这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消
-----------以下为HTML
品类 工厂 跟高 跟型 单价 级联统计指标
-------------以下为js代码
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'); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。