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.89327.com-2019正规彩票| www.86138.com-三彩女装总部| www.545833.com-申请福利彩票店流程| www.630016.com-下载够力七星彩图表| www.752917.com-渝彩-| www.cai3922.com长春福彩快三走势图| www.792028.com-3d彩票兑奖流程| www.943300.com-易盈彩票的真实性| www.71fo.com-时时彩牛牛玩法套利| www.52815.cc-好彩投app靠谱吗| www.301283.com-福利彩票号码推荐| www.414941.com-足彩8x56表-| www.565711.com-下载王牌彩票| www.741200.com-577彩票官网登录| www.885027.com-亿彩堂软件-| www.qx7.cc-快三人工计划官网| www.484118.com-8848彩票大厅| www.029002.com-重庆肘时彩开奖历史| www.121739.com-中港彩票app| www.216521.com-查一下体彩开奖号码| www.246088.com-足球竞彩直播新浪| www.127043.com-体彩排列三开奖查询| www.293576.com-彩票销售软件排行榜| www.934035.com-贵州快3彩票下载| www.cp147.cc-快三走势图上海| www.8587.cn-中国彩票31选七| www.188341.com-7070彩票开挂| www.64637.com-竞彩代理怎么找客户| www.95683.com-福彩和体彩-| www.33648.com-福客来彩票是真是假| www.913702.com-大发彩票是违法| www.bt90.cc-甘肃快三定牛| www.31.me-足球竞彩规则介绍| www.0906.me-福彩网址导航| www.21397.cc-体彩大乐透领奖时间| www.251450.com-分分彩手机投注平台| www.ce60.com-大发快三辅助器论坛| www.8817.top-福彩3d辅助-| www.714466.com-凤凰网彩票是真的吗| www.237200.cc-辽宁全运彩-| www.500996.com-彩色的梦图片图画| www.814968.com-足球彩票19038| www.959161.com-深圳体育彩票最大奖| www.i90.mobi-免费送彩金无需申请| www.fi45.com-快三稳定计划群| www.505590.com-长春快三黑彩严打| www.316837.com-竞彩体彩logo| www.367456.com-返奖最高的彩票网站| www.15219.cc-浙江体彩兑奖中心| www.539801.com-彩票冷热走势技巧| www.hd15.com-彩票倍投追号计算器| www.037379.com-快三算号软件| www.218012.com-幸运快三是真的吗| www.433369.com-彩票来讲-| www.631666.cc-丰彩彩票骗人吗| www.823643.com-三彩官方导航| www.91078.com-好彩36选3计算| www.083232.com-现在彩票累计多少| www.457.cm-腾讯分分彩是真的吗| www.9193.cm-新加坡彩票类的工| www.1952.live-福彩3d预测詹天佑| www.471010.com-国内买境外足彩| www.581529.com-808福彩-| www.693017.com-体彩大乐透透走势图| www.799226.com-天空彩票與你同行| www.576894.com-鸿运彩票手机版下载| www.700096.com-万彩网官网-| www.788910.com-唯彩竞彩推荐下载| www.877792.com-我想做网络私彩代理| www.953450.com-竞彩足球支持比例| 彩多多www.78949g.com| www.306.cn-彩票中奖官司| www.87yu.com-黑彩女业务员| www.163072.com-福彩类似排列五| www.261703.com-竞彩让球-| www.358766.com-河内5分彩可靠吗| www.446210.com-电话购彩票安全吗| www.49663.com-足彩家-| www.361669.com-流光溢彩是什么意思| www.128576.com-百年灵黑鸟每天快三| www.534.cm-福建体育彩票混合图| www.071867.com-怎么举报彩票店吃票| www.156052.com-大乐透彩票号码预测| www.my92.com-瑞彩祥云快三挂| www.76my.com-百胜彩票注册| www.227572.com-一分快三骗局揭秘| www.7795.win-彩票稳赢投法| www.45ex.com-中国福利彩开奖| www.725727.com-一出好戏彩票兑了吗| www.798772.com-下载一个体彩福彩网| www.863990.com-福彩上午领奖时间点| www.916301.com-代理全民彩票犯法吗| www.968290.com-网上时时彩怎么举报| www.cp0034.com-快三论坛-| www.rl68.com-新疆福彩-| www.726.me-时时彩包码二定| www.445123.com-晋城福利彩票153| www.039513.com-今晚4场进球彩对阵| www.8621.loan-彩票电视节目| www.79249.com-天天彩骗局-| www.560181.com-五分快三导师| www.163494.com-7号彩票平台| www.mh56.com-快三跨度怎么看号码| www.543237.com-江苏福彩大乐透开奖| www.493342.com-七乐彩彩票开奖时间| www.09693.com-湖北快三随州社区| www.356153.com-数学家能算出彩票吗| www.4022.vip-crown博彩公司| www.788208.com-竞彩一些规律| www.365813.cc-体彩任选9场| www.8504.vip-马来西亚有彩票吗| www.657036.com-彩贝游戏兑换码获取| www.16653.com-澳客彩票网比分直播| www.35nj.com-春秋彩票官网注册| 大赢家彩票平台www.068659.com| www.189403.com-彩票术语-| www.355624.com-昨天足彩比赛结果| www.840099.com-彩色的笔记本电脑| www.932139.com-七星彩中三个有钱吗| 吉利彩票www.66376j.com| www.412530.com-体育彩票365新版| www.9315.online双福彩票网手机版| www.544112.com-古彩戏法-| www.619411.com-5oo万足球彩票网| www.685386.com-彩计划下载福彩3d| www.785956.com-体彩迷语-| www.wb46.com-人人中彩官网| www.699572.com-福彩双色球查询结果| www.795364.com-彩票100本回血| www.873044.com-快三怎么预测跨度| www.311566.com-下载甘肃快三软件| www.433373.com-c81+全彩汉化| www.7pq.com-彩票4月-| www.941811.com-怎么代理福利彩票| 68彩票www.68682f.com| www.113561.com-四川省福彩领奖流程| www.aj57.com-168彩票开奖官网| www.61xd.com-彩38是黑站吗| www.4986.live-足彩中奖奖票大全| www.9760.in-重庆时彩跨度| www.566803.com-6768彩票网平台| www.7951.shop-后加彩瓷器的特点| www.573772.com-福彩之家-| www.849883.com-掌上中彩软件下载| www.919529.com-时时彩搭建出租| www.981168.cc-福彩快三彩票可信吗| www.wi4.com-中国竞猜彩网| www.vk67.com-贵州快三下载| www.68.me-彩泥大全图片| www.2233.biz-福彩助手不能提现吗| www.066959.com-手机博彩软件免费| www.125165.com-七星彩中奖概率最高| www.185946.com-天津时时彩开奖结果| www.qy62.com-天天分分彩开奖号码| www.123335.com-1088彩票网-| www.788298.com-手机17彩票-| www.870771.com-中博彩票开奖网站| www.937122.com-乐福彩票-| www.993386.com-足彩新手教程| www.le00.com-湖北福彩手机投注| www.d88.loan-霍华德彩票中奖指南| www.29yf.com-古风眼睛彩铅画| www.586988.com-卓易彩票中了一等奖| www.698475.com-嘉兴福彩中心电话|