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.251125.com-中福彩票邀请码| www.550813.com-互联网彩票导航| www.640435.com-500万彩票图片| www.17481.com-网上有没有彩票官方| www.279592.com-重庆时时彩代理注册| www.158880.com-黑龙江福利彩网| www.900044.cc-福彩开店有什么要求| www.598132.com-七乐彩19023| www.6366.cm-手机统一彩票| www.cp812.com-快三贵州今天走势图| www.230144.com-3d无名新彩吧| www.4129.cm-沙特评价彩虹无人机| www.9681.biz-上期体育彩票出什么| www.482695.com-什么是豆彩瓷器| www.575867.com-e乐服app福彩| www.31631.com-五选三彩票下载| www.387521.com-手机膜有彩色| www.885873.com-3d红五彩吧图库吧| www.217058.com-省份快三是怎么回事| www.636126.com-彩虹织机-| www.932811.com-网上买彩票怎么处罚| www.206878.com-152彩票真的假的| www.386309.com-6698彩票网平台| www.572336.com-彩迷开奖网-| www.736132.com-手机买彩票能挣钱吗| www.872590.com-快三技巧绝密杀号| www.45ry.com-彩票店怎样盈利| www.2907.cc-怎么做网上彩票代理| www.16550.com-五百彩票网的股票| www.76422.com-有老师带的彩票| www.017017.cc-盈彩网江苏快三| www.5864.vip-延吉彩票站行情| www.383926.com-中彩票标语-| www.s59.club-火星彩票快三| www.le38.com-彩4彩票-| www.4de.com-福利彩票最多买多少| www.562483.com-3亿彩票肥城| www.825728.com-山西太原快三| www.977641.com-世界杯足彩专家分析| www.830506.com-金华福彩申请| www.324768.com-假的中彩网-| www.120178.com-在线彩票投注靠谱吗| www.kc92.com-中彩网字谜-| www.723.win-19028期胜负彩| www.69983.cc-盛世彩票ss-| www.cp3758.com-百盈快三怎么看走势| www.263205.com-重庆时时彩开奖视频| www.96256.cc-体育彩票销售返点| www.69to.com-体彩高频彩害人| www.296823.com-快三都有哪些玩法| www.483848.com-香港富家彩-| www.297687.com-内蒙福彩快三有假吗| www.240077.com-重庆时彩注册网址| www.775549.com-石家庄体彩中心| www.5jy.cc-章鱼彩票中过大奖| www.557571.com-彩运来官网登入| www.171371.com-查一下福利彩票| www.637390.com-彩虹7无人机视频| www.712555.com-快三出好是人控制吗| www.796754.com-在淘宝买彩票怎么买| www.867353.com-昨晚上体彩开奖结果| www.927501.com-彩票数字几位数| www.994764.com-高仿体育彩票刮刮乐| www.94111.com-pc蛋蛋国际彩票| www.3077.cn-彩票弃奖中奖故事| www.9822.org-古建彩绘用的沥粉器| 6678彩票www.2688cai.com| www.580905.com-57彩票平台app| www.552350.com-神彩网高手论坛| www.652077.cc-福彩3d几点封盘| www.760797.com-时时彩下分版网站| www.xy93.com-多乐彩票时时彩| www.3741.net-富利彩票-| www.711701.com-人人中彩票是真的吗| www.814804.com-吉林快三大小微信群| www.900082.cc-江苏快三能挣钱吗| www.959610.com-75彩票网注册| 500彩票www.26299w.com| www.091217.com-春秋彩票娱乐登录| www.709305.com-快三中彩网-| www.360715.com-合创彩票平台| www.487258.com-天天彩选四玩法| www.271624.com-广东好彩一走势图| www.374351.com-彩票3d三地胆| www.490510.com-天猫国际城彩票平台| www.561228.com-彩票下一期预测| www.653173.com-海南博彩a股| www.752671.com-易购彩票是不是骗局| www.822002.com-彩票开奖足球| www.900228.com-生日号码生成彩票| www.969604.com-牛彩彩票邀请码| 百姓彩票www.960885.com| www.378387.com-七彩娱乐官网注册| www.520612.com-爱彩票安卓版| www.604144.com-688彩票例行审核| www.706325.com-天天彩票分分彩| www.800934.com-辽宁真版3d彩涂| www.883627.com-辽宁快乐12爱彩乐| www.961012.cc-3d彩综合走势图| www.227267.com-快三走势图江苏遗漏| www.945991.com-腾讯10分彩走势图| www.0311.top-彩票占gdp-| www.087351.com-680彩票-| www.183920.com-今日贵州快三出奖号| www.560832.com-乐彩网投资计划| www.690512.com-美国彩票多久开一次| www.679485.com-玩彩票倾家荡产| www.234473.com-如何网上购买足彩| www.br85.com-赢彩网快三计划| www.69987.cc-盛世彩票登录网站| www.r42.com-易发彩-| www.602483.com-瑞典一分彩走势图| www.705231.com-体彩竞彩网比分直播| www.a59.cn-竞彩经验-| www.911841.com-今日福彩3d藏机诗| www.09098.com-广东体彩软件下载| www.578038.com-福彩太湖子谜| www.85249.com-购手机福利彩票| www.568834.com-十一选五大彩鲸开奖| www.649410.com-大陆会开放博彩业吗| www.710646.com-d58cc赢彩彩票| www.776464.com-彩票追号倍投计算器| www.841201.com-七哥足彩微博| www.891234.cc-幸运时时彩计划网页| www.954499.com-体彩二维码扫描| www.993299.com-足彩中奖后怎么兑奖| www.tn8.cc-快三时时彩票| www.04828.com-体彩中心官方网站| www.0022.loan-彩票跟投-| www.972264.com-福彩3d开奖直播| www.80oy.com-有盈彩票是骗局揭秘| www.336607.com-福利彩票今天开奖| www.954597.com-彩票77官网-| www.74457.com-福利彩票5等奖多钱| www.gi39.com-c168彩票信誉好| www.001271.com-返点高的彩票| 环球彩票www.660686.com| www.31ud.com-彩虹宝宝第三季全集| www.555.net-河内五分彩预测| www.79806.com-阜阳市有彩票机吗| www.418907.com-彩金风暴50p| www.537026.com-春秋彩票是不是正规| www.654024.com-上饶市福彩中心| www.732115.com-彩票长期守号有用吗| www.804194.com-彩宏娱乐app| www.907117.com-彩500下载快三| www.984046.com-关注老猫看彩平台| www.wl47.cc-福彩3d藏机图全部| www.29xp.com-彩票开妜-| www.0800.cc-足彩去哪投注| www.777728.com-我要中彩软件可信吗| www.879220.com-95彩票是不是骗局| www.pn79.com-福利彩票系统软件| www.un65.com-手机百度内蒙快三| www.521310.com-乐迷天天大奖彩票站| www.583731.com-彩色的中国教案| www.644764.com-青岛体彩官网| www.706431.com-巴西三分彩是假的吗| www.0122.biz-彩色的近义词是| www.115714.com-中国竞彩500网| www.826185.cc-快三数字有规律吗| www.008.cc-鸣彩艺术是真假| www.4970.vip-中澳彩票平台| www.231112.com-网易彩票官网|