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.557750.com-重生洪荒之九彩凤凰| www.692873.com-乐乐彩票真假| www.775287.com-云南11选五购彩| www.858457.com-唐三彩官网-| www.940895.com-5分快三的网站| 百姓彩票www.bxcp3.com| www.945106.com-一上海快三走势图| 博友彩www.979133.com| www.5530.biz-南京雪中彩影| www.46585.com-吉林时时彩玩法| www.77907.com-互娱彩票聊天群| www.8418.loan-中彩票恶搞生成器| www.83em.com-拉萨彩票中心| www.208543.com-老谢说彩今日头条| www.39260.com-腾讯分分彩票技巧| www.163876.com-七乐彩摇一摇机选| www.663364.com-3d123彩票网| www.775508.com-福彩快3速查表图片| www.xx97.com-688彩票在线登录| www.67pz.com-足彩销售额-| www.6111.in-怎么买国外彩票| www.279111.com-北京褔利彩票论坛| www.798767.com-盛世彩票登录网站| www.089907.com-大发彩票违法吗| www.gx29.com-天天中彩票下载| www.09240.com-手机短信怎么买彩票| www.073691.com-金彩官网-| www.597521.com-福利彩票机号| www.680542.com-百乐门彩票能挣钱吗| www.769769.com-好彩店彩票苹果版| www.844937.com-福利彩票刮刮乐票种| www.336442.com-东方彩票提现提不了| www.846536.com-福彩3d账号注册| www.1664.biz-七乐彩怎么选号| www.2706.cn-牛蛙彩票36码网站| www.145360.com-新浪体育体彩| www.228272.cc-伊川县彩礼价目表| www.902037.com-黑彩平台代理| www.984783.com-鼎盛彩运8骗局| www.uk9.com-马来西亚彩票大全| www.um70.com-乐彩网首页3b| www.e75.cc-七乐彩同期历史号码| www.52539.cc-好彩网注册-| www.84747.com-十分彩官网手机下载| www.073660.com-3d杀号彩经网| www.159110.com-贵州体彩开奖结果| www.37917.cc-天吉福彩论坛手机版| www.92226.cc-3地福彩图谜总汇| www.4866.xyz-彩票中奖会怎样| www.08803.com-微信推荐福彩号码| www.8883.cm-体彩限制-| www.859886.com-1分快3开是国彩吗| www.227725.com-网络一分快三假吗| www.037155.com-内蒙古体育彩票网| www.129770.com-双色球中奖彩票票样| www.512138.cc-儿童彩铅画获奖作品| www.rn03.com-正版的盈彩网| www.z80.org-彩81彩票apk| www.871310.com-快三模拟器-| www.8632.in-如何注册百宝彩| www.84100.com-福彩票中奖号| www.5390.vip-福彩快三购买| www.716546.com-彩铅风景画圆形| www.964630.com-足彩14场最新分析| www.745839.com-竞彩足球购彩| www.5866.xyz-现有彩站出兑| www.673795.com-古建彩绘沥粉的技巧| www.771250.com-身边有人中过彩票吗| www.858525.com-竞彩胆拖可以打吗| www.927906.com-福彩奥运3d图迷| www.985995.com-福彩站怎么样| www.zn1.com-河北省快三遗漏提示| www.129740.com-彩票中奖收税| www.7269.vip-彩虹六号主动式防御| www.642321.com-福彩双色球广告图片| www.8066.org-爱彩乐版本下载| www.711837.com-58彩票下载网站| www.1806.cm-重庆时时彩玩法规律| www.256983.com-3d彩票分析软件| www.023.name-彩票世界的永久官网| www.188653.com-快三屠龙和跟龙| www.393771.com-彩票中大奖兑奖时间| www.cp1673.com-福彩快三官网投注站| www.rq00.com-三分时时彩正规吗| www.930.gg-村里福彩申请条件| www.dw05.com-福彩销售终端机加盟| www.24xq.com-体彩排列3预测定胆| www.1082.vip-分分彩害人不浅| www.23128.com-国彩下载安装到手机| www.69904.com-中国福彩彩票app| www.203136.com-福彩快乐20分| www.320032.com-福彩图迷汇总| www.437200.com-pcd彩票-| www.562370.cc-最牛彩票软件| www.661531.com-黑彩漏洞-| www.246018.com-8k彩票网站-| www.339640.com-福利彩票中奖的人| www.693192.com-买彩票有规律可循吗| www.yh19.cc-安然七星彩预测汇总| www.2226.cc-微彩论坛排列五| www.206617.com-福彩网app快3| www.bq31.com-足彩360-| www.zb34.com-五福彩票下载通用版| www.028071.com-678彩票骗局| www.122128.com-希腊时时彩开奖号码| www.207495.com-彩票软件大全双色球| www.295670.com-大发快三和值根据| www.744199.com-福彩双色球案件| www.862297.com-潢川县弋阳广场彩票| www.928318.com-2017七星彩奖表| www.981289.com-快三守号20期计划| www.f57.vip-快三江苏开奖结果| www.176719.com-江苏快三中奖多少钱| www.284629.com-福彩快三0034| www.699056.com-神彩非凡双色球专栏| www.821348.com-牛彩网字谜汇总| www.462009.com-彩500网合法吗| www.cai0733.com福彩快三网站| www.291657.com-体彩大乐透中奖号码| www.575348.com-糖果彩官网-| www.23415.cc-四季彩平台登录网址| www.002947.com-想开彩票站-| www.176708.com-江苏快三大小规则| www.91445.com-好彩蓝莓味爆珠| www.403677.cc-福利彩票机器摇奖| www.561538.com-天际彩票高手qq群| www.641708.com-体育彩票门头材质| www.123740.com-ag和高频彩-| www.366534.com-晨光48色彩铅色卡| www.035161.com-手机彩票能不能玩| www.111073.com-福彩机过户-| www.384975.com-3726澳发彩票网| www.500841.com-彩色底背景图| 中国福利彩票www.6364w.com| www.06229.com-3d福彩通-| www.750470.com-新快报轻报纸福彩| www.862411.com-中国手机彩票网下载| www.954041.com-uu快三怎么玩| www.cai24.cc-江苏快三骗局| www.131365.com-河南郑州彩礼多少| www.322316.com-高手彩票彩票玄机| www.704400.com-亚洲彩票网涉嫌诈骗| www.117524.com-竞彩场次好像减少了| www.705765.com-时时彩计划群彩票| www.1311.pw-河南彩宝网-| www.033796.com-怎样七乐彩机选一注| www.11hw.com-彩神计划可靠吗| www.007884.com-彩票书籍在线閲读| www.035656.com-最经典的彩票宣传语| www.20095.com-今日福利彩票双色球| www.71610.com-河南福彩快三太假| www.tp82.com-欧冠足彩怎么买| www.o85.cn-彩01彩票下载| www.74fo.com-中彩500网-| www.0473.cn-亚洲彩票提款| www.742.org-彩神x登陆-| www.5184.live-四川福彩双色球| www.9927.cm-广州汇彩路-| www.296465.com-彩迷兔-| www.598151.com-十一选五体彩走势图| www.722792.com-好彩票正规网站| www.801093.com-快3彩票中奖是多少| www.869623.com-唯彩会彩票网| www.62151.com-福利彩票大乐透推荐|