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天

知道了
亚洲28 www.0175.top-国彩彩票邀请码| www.78hm.com-南方双彩票网走势图| www.3332.mobi-彩票特别号如何预测| www.345.red-黑彩平台网址| www.8899.net-怎么买竞彩容易中奖| www.cp412.com-江苏快三官方平台| www.x68.net-红彩哥哥直播作品| www.0895.date-华夏彩票快三技巧| www.wg72.com-福利彩票开奖双色球| www.95202.com-彩妆蛋怎么用| www.176220.com-江苏快三稳赚计划| www.985499.com-竞彩足球14场比赛| www.de18.com-秒速时时彩开奖走势| www.b55.club-特区微彩排列| www.31mb.com-预测港彩生肖及方法| www.090.biz-500万彩票黑彩| www.3543.vip-彩票二等奖要捐款吗| www.444714.com-五彩斑斓的世界结局| www.126279.com-彩票248官方| www.218358.com-台北快三是官方开吗| www.949207.com-牛彩网排列三预测| www.59089.com-彩易双色球综合舨| www.449892.com-彩票搞笑图片带字| www.086879.com-七乐彩单式-| www.45vp.com-足球彩票点店| www.675825.com-七乐彩二等奖概率| www.596166.cc-时时彩掌赢专家下载| www.518794.com-旺彩11选5分析| www.3646.vip-福彩七乐彩如何兑奖| www.i77.date-国家福利彩票官方网| www.2594.org-零一彩票-| www.768703.com-彩票发展下线方法| www.951571.com-澳客竞彩足球胜平负| www.em02.com-快彩荐号专家遗漏值| www.127729.com-彩虹app生成| www.072407.com-香港四亿彩票网站| www.79948.com-网络彩票输了几百万| www.057108.com-五分快三倍投计算器| www.316018.com-体彩店没有竞彩项目| www.400857.com-七乐彩直播频道| www.088030.com-双赢彩票手机app| www.198573.com-大发快三推算下期| www.503392.com-鸿彩灯光维修| www.530420.com-彩友多怎么注册店主| www.fx01.com-瑞彩网官网-| www.362311.com-描写彩虹的好词好句| www.525331.com-时时彩返点什么意思| www.659482.com-诸葛团队35彩票| www.797782.com-九九集团彩票可信吗| www.941333.com-体彩规则介绍| www.gm35.com-七乐彩兑奖对照表| www.931825.com-中原彩票怎么样| www.995872.com-怎么举报好彩店彩票| www.fm69.com-福彩3d跨度预测| www.r35.net-易发大彩票违法吗| www.381994.com-我精彩的恐龙视频| www.771250.com-身边有人中过彩票吗| www.938665.com-599彩票官网| www.xn42.com-江苏快三技巧教学| www.30qg.com-分分彩靠什么开奖| www.89097.com-澳门博彩足球赔率| www.691161.com-福彩排列七综合走势| 三星娱乐www.sxyl2.com| www.199421.com-即时开彩-| www.181878.com-彩中彩下载-| www.1534.cn-福利彩票大家乐| www.032589.com-彩票106是假的| www.9907.xyz-福彩解太湖分析汇总| www.600784.com-吉林快三开奖号| www.095163.com-外围足彩网站| www.398776.com-彩票的故事-| www.539134.com-567彩票跑路了吗| www.170809.com-大发uu快三计划| 博乐彩票www.255811.com| www.276859.com-1秒开彩-| www.584443.com-1077彩票app| www.6589.vip-体彩双彩论坛试机号| www.25911.com-彩虹含义-| www.555368.com-app彩计划彩票| www.632048.com-七彩虹收购承启| www.700311.com-必发彩票安全购彩| www.642221.com-一出好戏彩票app| www.719331.com-彩吧下载官方| www.789436.com-足彩预测好的app| www.852256.com-五分彩定位胆走势图| www.905316.com-足彩投注比例| www.958891.com-彩票开奖什么软件好| 福彩网www.055t.cc| www.f34.cn-中彩网走势图3d| www.023569.com-今晚七乐彩开奖| www.233574.com-体育彩票专家预测| www.372936.com-陕西福彩3d开奖| www.499111.com-安徽快三网站| www.621282.com-彩票之家解正版成语| www.803137.com-亡灵天涯彩票专栏| www.3490.cn-天天彩票怎么回事| www.14451.com-江苏e球彩助手| www.ld71.com-凤彩网app-| www.485649.com-有合法的购彩平台吗| www.590896.com-手机中彩堂富甲社区| www.662061.com-头头博彩-| www.737172.com-上海体彩七星彩| www.817621.com-广东省体育彩票中心| www.906992.com-8彩下载-| www.30ze.com-彩虹岛弥勒丸| www.4264.pw-唯彩会体育看球| www.37571.cc-福彩汽车抽奖活动| www.cp229.com-兰州快三走势一定牛| www.222697.com-上海的快三走势| www.651917.com-中国福利彩票多少钱| www.751823.com-彩票1号平台| www.807867.com-大优彩票怎么样| www.869589.com-唯彩会双色球| www.920866.com-体彩365-| www.970889.com-梦见清晰的彩票号码| 玩彩吧www.777337a.com| www.7103.vip-开封七彩集团幼儿园| www.816912.cc-中彩票的人多吗| www.993831.cc-足彩有几种购买方式| www.3og.com-世纪彩城-| www.304819.com-快三稳赢-| www.729419.com-博彩88-| www.06tu.com-彩铅星空画法教程| www.99701.com-彩客化学戈弋照片| www.635553.com-彩宝哪个牌子好| www.812763.com-11选五快乐彩| 500万彩票www.98528f.com| www.50pv.com-足彩优化计算器| www.7565.cc-彩赢乐app下载| www.65579.cc-买彩票下载那个软件| www.449596.com-彩吧彩票怎么玩| www.7ow.com-福彩体彩门头| www.97267.cc-竞彩实时投注量查询| www.233810.com-彩票容错是什么意思| www.487866.com-老余说彩-| www.676769.com-今日佬牛足彩博客| www.14om.com-竞彩足球违法吗| www.03969.cc-豪彩娱乐官方下载| www.55408.cc-做时时彩犯法吗| www.395096.com-彩票差一位得多少钱| www.633980.com-彩盈娱乐手机版| www.01782.com-快彩害人-| www.513683.com-二分钟开奖的彩票| www.165345.com-创富彩票靠谱嘛| www.375078.com-五分6合和彩| www.512213.cc-灯笼彩铅画-| www.em06.com-河北快三号走视图| www.835933.com-手机彩票缩水软件| www.63900.com-足彩单关怎么玩| www.284117.com-彩票买哪种好| www.569397.com-体彩双色球规则| 500彩票www.504277.com| www.674886.com-江苏体彩7-| www.112505.com-众购彩票苹果版本| www.8265.com-景德镇福彩中心在哪| www.980859.com-网上七彩是骗局吗| www.974216.com-南京福彩开奖结果| 幸运彩票网www.33598n.com| www.66050.com-缅甸好彩蓝莓双爆珠| 幸运彩票www.317299.com| www.060480.com-彩要平台-| www.905120.com-世界杯竞彩足球| www.ff46.com-大吉彩票可靠吗| www.98fg.com-传统竞彩足球|