html 部门人员选择,jQuery部门人员拖拽管理代码

使用方法：

1、head引入css文件

2、head引入js文件

3、body引入HTML代码

部门负责人

100 :

0/2

95 :

0/5

90 :

0/不限

90以下 :

0/不限

$(function() {

changeData(10,$("#leader-wrapper"),'lead','张三');

// 放在加载人员的函数里

changeHeight();

$(".list-wrapper>li").draggable({

revert: true

});

// 拖拽追加事件

$(".top-droppable").topDroppable({

drop: function (e, ui) {

var parentNode=$(this).parents(".form-content");

var parentNextNode=$(this).parents(".width-53").next().find(".people-list");

var jScore=Number($(this).next("div").find(".numSpan").text());

var totalScore=Number($(this).next("div").find(".totalNum").text());

if($(ui.draggable[0]).attr("data-bs")==parentNode.attr("data-bs")){

if($(this).next(".score-xz").hasClass("num-xz")){

if((jScore)

$(this).next("div").find(".numSpan").html(jScore+1)

}else{

alert("超出可选人数上限");

return

}

}else{

$(this).next("div").find(".numSpan").html(jScore+1)

}

$(this).parents(".form-content").height("auto");

$(this).parents(".width-53").next().find(".people-list").height("auto");

$(this).append("

"+$(ui.draggable[0]).text()+"

");

$(ui.draggable[0]).hide();

changeHeight()

}else{

alert("不可越界")

}

}

}).droppable({

tolerance: "pointer"

});

$(".score-wrapper").on("click",".del",function(){

var parentNode=$(this).parents(".form-content");

var parentNextNode=$(this).parents(".width-53").next().find(".people-list");

var jScore=Number($(this).parents(".score-wrapper").find(".score-xz").find(".numSpan").text());

var totalScore=Number($(this).parents(".score-wrapper").find(".score-xz").find(".totalNum").text());

$("#"+$(this).parent().attr("class")).show();

if(jScore>0){

$(this).parents(".score-wrapper").find(".score-xz").find(".numSpan").html(jScore-1)

}

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

if(parentNextNode.height()>parentNode.height()){

parentNode.height(parentNextNode.height())

}

})

$(window).resize(function(){

changeHeight()

})

});

function changeData(num,parent,bmName,name) {

var leadHtml='';

for(var i=0;i

leadHtml+='

' +

''+name+i+'' +

'' +

''

}

$(parent).html(leadHtml);

}

// 左右高度相等函数

function changeHeight(){

var divGroup=$(".div-group");

for(var i=0;i

var parentNode=$(divGroup[i]).find(".form-content");

var parentNextNode=$(divGroup[i]).find(".people-list");

parentNode.height("auto");

parentNextNode.height("auto");

if(parentNode.height()

parentNode.height(parentNextNode.height())

}else{

parentNextNode.height(parentNode.height())

}

}

}

以上：演示第一个方法调用。