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

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

这个demo展示的效果为：从上面可以拖动到下面相应的框中（原有的不能再拖动），拖动框中的东西到外面可以取消

-----------以下为HTML

品类

工厂

跟高

跟型

单价

级联统计指标

列指标

-------------以下为js代码

var tab = [];

$('.items li').draggable({

proxy: 'clone',

revert: true

});

// 级联统计指标放置区

$('.target-cascade').droppable({

onDragEnter: function(e,source){

$(this).css('border','1px solid red');

},

onDragLeave: function(e,source){

$(this).css('border','1px solid black');

},

onDrop: function(e,source){

// 判断拖动的元素是否存在于放置区内

if($(source).draggable('options').proxy === 'clone'){

// 禁用拖动

NotDrag(source);

// 将拖入元素的原位置记录下来

var buttonName = $(source).find('span').html();

console.log("--------"+$(source).index());

tab[buttonName] = $(source).index();//返回指定元素相对于其他元素的位置（0,1等）,如果没有找到，则返回-1

var Ele = $('

Ele.appendTo('.target-cascade ul');

}

$(this).css('border','1px solid black');

// 拖动放置区内的元素

$(this).find('button').draggable({

revert: true,

onStopDrag: function(e){

var _index = tab[$(this).html()];

$(this).parent().remove();

$('.items li:eq('+_index+')').draggable('enable');

$('.items li:eq('+_index+')').find('i').css('backgroundColor','red');

}

});

}

});

// 列指标放置区

$('.target-column').droppable({

onDragEnter: function(e,source){

$(this).css('border','1px solid red');

},

onDragLeave: function(e,source){

$(this).css('border','1px solid black');

},

onDrop: function(e,source){

// 判断拖动的元素是否存在于放置区内

if($(source).draggable('options').proxy === 'clone'){

// 禁用拖动

NotDrag(source);

var buttonhttp://Name = $(source).find('span').html();

tab[buttonName] = $(source).index();

var Ele = $('

'求和计数

Ele.appendTo('.target-column ul');

}

$(this).css('border','1px solid black');

// 拖动放置区内的元素

$(this).find('button').draggable({

revert: true,

onDrag: function(e){

$(e.data.parent).find('select').hide();

},

http:// onStopDrag: function(e){

var _index = tab[$(this).html()];

$(this).parent().remove();

$('.items li:eq('+_index+')').draggable('enable');

$('.items li:eq('+_index+')').find('i').css('backgroundColor','red');

$(e.target).siblings('select').show();

}

});

}

});

//禁止拖动

function NotDrag(source){

$(source).draggable('disable');//禁用拖动动作

$(source).find('i').css('backgroundColor','grey');

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。