QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 提示框/浮动层/弹出层 > jQuery部门人员拖拽管理代码

jQuery部门人员拖拽管理代码

jQuery元素拖拽制作部分人员管理,将右边名字拖入到左侧对应输入框中添加或删除功能代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/sweet-alert.css">
<link rel="stylesheet" href="css/select.css">

2、head引入js文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

3、body引入HTML代码

<div class="div-group">
	<div class="width-53 clearfix">
		<div class="form-content pink-border-color border-2px clearfix" data-bs="lead" id="leading">
			<div class="form-left">
				<div class="form-title pink-bg-color">部门负责人</div>
			</div>
			<div class="form-right">
				<div class="score-wrapper clearfix">
					<div class="score-f">
						<span class="score-span blue-bg"></span>
						100 :
					</div>
					<div class="top-droppable pink-border-color people-group clearfix">

					</div>
					<div class="score-xz num-xz">
						<span class="numSpan">0</span>/<span class="totalNum">2</span>
					</div>
				</div>
				<div class="score-wrapper">
					<div class="score-f">
						<span class="score-span qi-bg"></span>
						95 :
					</div>
					<div class="top-droppable pink-border-color people-group clearfix">

					</div>
					<div class="score-xz num-xz">
						<span class="numSpan">0</span>/<span class="totalNum">5</span>
					</div>
				</div>
				<div class="score-wrapper clearfix">
					<div class="score-f">
						<span class="score-span green-bg"></span>
						90 :
					</div>
					<div class="top-droppable pink-border-color people-group clearfix">

					</div>
					<div class="score-xz">
						<span class="numSpan">0</span>/<span>不限</span>
					</div>
				</div>
				<div class="score-wrapper">
					<div class="score-f">
						<span class="score-span yellow-bg"></span>
						90以下 :
					</div>
					<div class="top-droppable pink-border-color people-group clearfix">

					</div>
					<div class="score-xz">
						<span class="numSpan">0</span>/<span>不限</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="width-47 clearfix">
		<div class="people-list pink-border-color border-2px ">
			<ul class="list-wrapper clearfix" id="leader-wrapper">
			</ul>
		</div>

	</div>
</div>

	
<script src="js/jquery.top-droppable.js"></script>
<script src="js/sweet-alert.min.js"></script>
<script>
	$(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)<totalScore){
							$(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("<div class='"+$(ui.draggable[0]).attr('id')+"'>"+$(ui.draggable[0]).text()+"<span class='del'></span></div>");
					$(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<num;i++){
			leadHtml+='<li id="'+bmName+i+'" data-bs="'+bmName+'">' +
				'<span class="name">'+name+i+'</span>' +
				'<span class="infor"></span>' +
				'</li>'
		}
		$(parent).html(leadHtml);
	}
	// 左右高度相等函数
	function changeHeight(){
		var divGroup=$(".div-group");
		for(var i=0;i<divGroup.length;i++){
			var parentNode=$(divGroup[i]).find(".form-content");
			var parentNextNode=$(divGroup[i]).find(".people-list");
			parentNode.height("auto");
			parentNextNode.height("auto");
			if(parentNode.height()<parentNextNode.height()){
				parentNode.height(parentNextNode.height())
			}else{
				parentNextNode.height(parentNode.height())
			}
		}
	}
</script>

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

[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
七乐彩票 www.804099.com-365彩票网页代码| www.165931.com-怎么拉人玩彩票技巧| www.297225.com-湖北省体彩兑奖地点| www.77185.cc-中国竞彩网l| www.cp85.com-甘肃彩票十一选五| www.0801.org-网上怎么买足彩竞彩| www.818769.com-幸运5星彩票| www.308396.com-中福快三是哪里出的| www.442007.com-体彩店还能兼营什么| www.572676.com-江苏快3彩乐乐直播| www.50wb.com-郑州快三开奖号码| www.694449.com-中国竞彩篮球网官网| www.48gy.com-体彩超级大乐| www.15478.com-嘉兴福利彩票申请网| www.88739.cc-9彩计划网-| www.087169.com-6d彩票-| www.v01.cn-金彩平台怎么样| www.60803.com-甘肃省福利彩票用途| www.622905.com-039彩票-| www.721022.com-快三大小和值计算| www.811761.com-七乐彩复式11中6| www.424477.com-福利彩票内部软件| www.71199.cc-福彩票七乐-| www.42sa.com-福彩3b走式图| www.2536.pw-饰彩造句和意思| www.15498.com-各省快三开奖| www.77712.cc-福利彩票今晚开奖号| www.040860.com-篮球博彩打水看盘| www.711610.com-t5584彩票-| www.26ne.com-快三怎么买稳中| www.206012.com-辉煌彩交易安全吗| www.pr85.com-98彩是正规平台吗| www.882673.com-福彩时时乐开奖结果| www.aj50.com-七星彩最准确十专家| www.p87.online-彩票中了不能提现| www.89fb.com-新浪澳彩动态| www.678140.com-好运快三怎么玩稳赚| www.786879.com-满堂彩网站北京赛车| www.919169.com-十大黑彩来平台| www.af0.cc-乐彩3d论坛-| www.2vm.cc-极速时时彩正规吗| www.4543.vip-七星彩票选几个号码| www.639382.com-体彩终端远程控制| www.185732.com-快三必中技巧| www.666992.com-乐彩一般怎么买| www.02052.com-搜狗彩票net| www.96510.com-台湾彩票大福彩| www.573565.com-安徽彩票大奖去哪领| www.692652.com-进入福彩门户| www.811688.com-三地双彩论坛| www.946132.com-彩九c9com平台| www.im3.com-vip彩票网-| www.645009.com-118彩票正规吗| www.98117.cc-篮球彩票贴吧| www.863857.com-七星彩湖北兑奖地点| www.946921.com-高频彩票调整店关门| www.an40.com-贵州省体彩领奖地址| www.u71.cc-网上快三平台靠谱不| www.246471.com-彩票快三单查询结果| www.669505.com-彩票10326-| www.750339.com-中彩票a-| www.821933.com-如何买彩票中五百万| www.895091.com-购彩网是真的吗| www.959632.com-顶尖彩票平台是正规| 8号彩票www.81520q.com| www.613353.com-双色球杀号百度彩票| www.728518.com-粤淘彩票是骗局吗| www.833071.com-彩娱乐彩票| www.916660.com-最稳定的彩票平台| www.976183.com-河南郑州彩礼多少| www.cp3773.com-幸运快三合法吗| www.pz03.com-567彩票官方版| www.05ug.com-新手彩铅用什么牌子| www.290.tv-2010年七星彩| www.009561.com-798彩票开奖记录| www.087047.com-为内蒙古喝彩原版| www.721557.com-彩票专用计算机| www.835812.com-好彩三八是什么意思| www.922098.com-彩票自助售卖机加盟| www.978499.com-好彩官网是正规的吗| www.533412.com-举报黑彩网站| www.652645.com-爱彩彩票网-| www.782346.com-福气彩票站-| 亚洲www.391109.com| www.wa16.com-玩大发快三的大神| www.956210.com-带人玩彩赚钱| 凤凰彩票www.88266n.com| www.lg43.com-豪彩平台下载安装| www.715516.com-体彩22选5-| 68彩票www.68689d.com| www.283551.com-七星彩奖表图808| www.492347.com-七彩字体软件| www.594360.com-七彩汇娱乐二维码| www.700465.com-竞彩足球兑奖地点| www.805185.com-七乐彩怎么七个号| www.890738.com-十分钟彩票倾家荡产| www.980833.com-彩票源码论坛| www.aw78.com-福彩5d是每天开| www.98309.com-中国体育竞彩比分| www.020707.com-福彩第二版-| www.95gx.com-欧洲杯竞彩网| www.298777.com-体彩排列三推荐号| www.165067.com-全民彩彩票官网| www.060036.com-乐彩vip网站| www.413603.com-竞彩胜平负入门| www.062214.com-万彩网是合法的吗| www.434117.com-体育彩票买什么| www.463069.com-环球一号彩票靠谱吗| www.962928.com-下载星光彩票| www.68528.com-福彩22选5好运3| www.145451.com-福彩金手指报纸| www.967375.com-彩民微信交流群| www.lw94.com-二分时时彩全天计划| www.03598.com-买足球彩票的技巧| www.760533.com-怎么下载时时彩宝典| www.40537.com-明天晚上开什么彩票| www.066422.com-u9彩票被骗-| www.131982.com-退还彩礼案例| www.283010.com-体彩投注限额| www.456214.com-彩票中奖过期怎么办| www.297531.com-v8彩票app下载| www.467813.com-修改福利彩票兑奖| www.693600.com-竞彩足球赚钱的多吗| www.439552.com-7彩网怎么提现| www.111703.com-时时彩28期-| www.zo0.com-查彩票中奖结果| www.03167.com-掌优彩票是真的吗| www.485904.com-飞彩app-| www.770550.com-时时彩过春节停吗| www.5688.me-tt彩票下载-| www.911.gg-生命没有彩排| www.755759.com-旺彩超级大乐透| www.982054.com-七星彩彩票对比器| www.80859.cc-福彩排七-| www.286962.com-9购十分彩江苏快三| www.545679.com-中奖的彩票图片大全| www.959895.com-乐彩网3d开奖结果| www.jw2.cc-河南福彩网官网| www.847765.com-沈阳彩票站有快三吗| www.471168.com-私彩幕后控制| www.416068.com-uc彩票靠谱吗| www.598811.com-彩票201935期| www.450499.com-海南七星彩代理| www.72690.com-竞彩足彩让胜| www.ls1.com-正规大发快三| www.625520.com-七乐彩杀号2元网| www.959522.com-幸运分分彩计划全天| www.065912.com-网赌送彩金-| www.488985.com-包头福彩3d中| www.590722.com-澳门幸运彩是真的吗| www.457948.com-恒彩网677-| www.718375.com-彩虹张惠妹| www.152508.com-彩票欺骗-| www.442008.com-福利彩票游戏可靠吗| www.596587.com-吉林派彩免费版| www.88659.cc-彩票九彩-| www.625073.com-网络彩票代理推销| www.770412.com-篮彩吧-| www.496305.com-韦德彩票平台| www.657804.com-ok精彩是几线杂志| www.760728.com-时时彩赌番摊| www.863033.com-下载众购彩票软件| www.927286.com-今天买彩票最佳号码| www.973574.com-彩票和卖-|