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.xw88.com-彩票赠送现金| www.88568.com-多赢彩票在线登录| www.431322.com-葡京彩票官网登录| www.660508.com-彩票万能刷分软件| www.930776.com-网上买彩票的网址| www.120204.com-百万富翁彩票| www.45nf.com-hdp看彩虹台| www.509244.com-犀牛彩票赌博案| www.665251.com-七乐彩历史浏览| www.820540.com-天津体育彩票app| www.929661.com-七星彩杀头杀尾| 福彩www.26878f.com| www.928125.com-彩色打印机的价格| www.xk.com-中彩彩票中福快3| www.312638.com-胜负彩19050期| www.8472.vip-博友彩合法吗| www.59232.cc-5d彩印机多少钱| www.225854.com-刷彩金-| www.mk8.cc-怎么看彩票趋势图| www.780848.com-亚博科技阿里彩票| www.863310.com-2月16号体彩| www.928567.com-福彩3d解密-| www.983437.com-九度彩票合法吗| www.rk6.com-福彩快三害死人| www.202208.com-山西体彩-| www.171817.com-贵州体彩下载| www.386486.com-彩票是人为控制的| www.737638.com-红旗彩票怎么下| www.a65.top-霍金彩票公式| www.132085.com-濮阳彩礼多少钱| www.214342.com-人人中彩票app| www.080507.com-19042七星彩| www.183381.com-福利彩票甘肃快3| www.897212.com-18年3d彩票谜语| www.975053.com-彩票777下载| www.cp7747.com-福彩快3玩法技巧| www.rg21.com-168彩票提不出款| www.00oy.com-赞美彩虹的诗句李白| www.78kh.com-福彩3d黄金杀码| www.34ha.com-彩票一分钱投注| www.695.hk-竞彩购买技巧分享| www.5054.biz-彩票搞笑讽刺段子| www.081072.com-97彩票平台-| www.150112.com-甘肃体彩网11| www.226917.com-幸运快三大小怎么看| www.297556.com-福彩快三跨度图片| www.362927.com-广州彩票开奖查询| www.124183.com-幸运彩票定位胆骗局| www.381280.com-七乐彩今日开奖直播| www.555544.com-贵州福彩站-| www.0919.org-福彩3d追号划算吗| www.063297.com-体彩退押金需要多久| www.259372.com-赢家彩票邀请码| www.365904.com-水彩颜料排行| www.502472.com-圣彩票-| www.311677.com-福彩十选五啊| www.377006.com-玩彩网骗人吗| www.678535.com-唯彩旧版下载安装| www.758236.com-长春彩溢健康浴场| www.823582.com-彩凃钢板-| www.898793.com-体育彩票网点查询| www.958677.com-ee彩彩票-| www.62nz.com-体彩大乐透真实吗| www.881305.com-中国福彩图谜总汇| www.va19.com-时时彩怎么买赚钱| www.4029.biz-新粤彩报纸在线看| www.19179.cc-中国体彩兑奖流程| www.424808.com-49官方彩票网| www.937567.com-m5彩票-| www.681.net-校长体彩福彩推荐号| www.822511.com-爱博彩票222| www.899425.com-七星彩自动规律软件| www.970347.com-体彩任选3开奖| www.13334.cc-足彩串关中奖规则| www.66909.com-彩票领奖要多久| www.652460.com-500体彩-| www.759129.com-菲律宾大中华彩票| www.66346.com-百度彩票网上能买吗| www.732923.com-下载江苏体彩七位数| www.540883.com-安徽快三号码| www.733854.com-九亿九彩票-| 梦想彩票站www.43131r.com| www.803113.com-官网购彩票app| www.25722.com-苹果版彩库宝典| www.132476.com-大发快三app计划| www.504233.com-奔驰彩票网投客户端| www.qp72.com-时时彩群号-| www.333200.com-5分快彩技巧| www.964826.com-吉祥彩票注册网址| www.238901.com-微信49个号码彩票| www.367206.com-小雏菊彩铅画| www.911877.com-天天彩票网站官方网| www.979093.com-广州哪有好彩烟| www.cp3653.com-河南福彩快三秘诀| www.na53.com-01cc官方彩票| www.916810.com-永盛彩票ys38| www.cp2013.com-快三猜一个号就中奖| www.949663.com-今日体彩中奖号| www.dt90.com-快三破解器好用吗| www.694635.com-体育彩票七星彩吧| www.526550.com-非法私营彩票| www.830881.com-元角分彩软件下载| www.899584.com-c彩83安卓版| www.967979.com-时时彩怎么举报| www.013600.com-爱彩乐一分钟快三| www.83sr.com-联运时时彩-| www.962329.com-福彩快乐彩12选5| www.392363.com-昨晚上彩票开奖| www.100922.com-彩运8平台真的吗| www.92ib.com-去哪里找彩票工资车| www.89664.com-空飘彩烟多少钱| www.257878.com-038彩票苹果手机| www.883581.com-手机彩票投注站下载| www.vc52.com-福彩快三稳定计划| www.560962.com-大富豪彩票手机版| www.990027.com-快三大全app| www.33dl.com-足球彩票让球规则| www.5760.cc-地下彩票犯法吗| www.140829.com-广东福彩兑奖流程| www.36250.com-彩友吧预测专区总汇| www.886557.com-c8cn六彩香港| www.328107.com-彩乐网福中网嬴彩| www.678217.com-福彩3d胆组怎么做| www.cai7155.com吉林快三大小走势图| www.256425.com-网易手游彩票| www.618808.com-新浪彩票网页版| www.mw79.com-双色球中彩网下载| www.217.cc-鼎丰娱乐彩票| www.3282.cn-万达彩票网站| www.73km.com-三d体彩开奖结果| www.843720.com-彩票销售新规定| www.cg68.com-江苏快三讨论群| www.8456.in-为内蒙古喝彩歌词| www.705116.com-中国体彩网现场直播| www.811073.com-六堂彩天空彩票大全| www.877203.com-极速赛车彩票客户端| www.978034.com-猫彩铅-| 乐彩网www.987590.com| www.hf09.com-江苏快三倍投计算器| www.xj22.cc-三分时时彩技巧集锦| www.84tu.com-北京七星彩开奖| www.76av.cc-动物彩票开奖走势| www.68823.com-福彩怎样选号| www.7603.vip-个人七星彩软件下载| www.71760.com-富彩彩票真假问题| www.647908.com-赌时时彩输惨的故事| www.714497.com-7728彩票app| www.796468.com-快三注册流程及费用| www.871608.com-福彩三地试机号预测| www.937061.com-福都彩票app| www.977217.com-濮阳彩礼规定| 500彩票www.550637.com| www.492557.com-卖黑彩票-| www.552456.com-玩五分彩有什么技巧| www.wc74.com-内蒙快三最近50期| www.54343.com-体彩标志-| www.609171.com-彩票采集修复教程| www.689606.com-国民彩票赚钱吗| www.811997.com-福彩3d最小值振幅| www.06891.com-福彩3d计划网页版| www.63791.cc-竞彩人气交易平台| www.7067.biz-淄博七彩建设| www.9108.loan-今天七乐彩开奖吗| www.ch86.com-黑彩量刑-|