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.21393.com-下载彩神vlll| www.6758.in-彩色激光复印机a3| www.172883.com-快三开奖助手app| www.259980.com-彩票是合法的赌博| www.93tf.com-彩色纯色背景图片| www.312675.com-快购彩怎么样| www.654043.com-779cc彩票-| www.09118.cc-福彩网上投注| www.091396.com-连中彩票app旧版| www.055615.com-世界杯体彩规则| www.278115.com-安徽体育彩票官网| www.150055.com-中国甘肃甘肃快三| www.815606.com-福彩黑圣手图| www.915726.com-加盟福彩-| www.983485.com-彩88是真的吗| www.cc1.cc-福彩快3走势图福建| www.ps63.com-广州鸣彩传媒| www.6019.in-彩票不能在线购买| www.128530.com-分分快三漏洞| www.210362.com-快三第一门户app| www.290976.com-内蒙快三开下载| www.363369.com-免费御彩轩计划账号| www.466411.com-福彩七乐彩派奖规则| www.60469.com-中国体育彩票星彩网| www.782575.com-网易彩票百盈快三| www.297822.com-四川福彩中心在哪| www.784422.com-七星彩怎样算法| www.sp.cc-快3彩票下载安装| www.8395.biz-彩钢围挡清包工合同| www.934525.com-福利彩票软件有哪些| www.aj89.com-七星彩今期-| www.439489.com-椒江体育彩票店转让| www.889528.com-云购彩票是否合法| www.cai2346.com湖北爱乐彩-| www.83815.cc-刮彩票能中大奖吗| www.050181.com-福彩勇士争先规律| www.126272.com-第一彩票软件| www.6817.com-十一选五福利彩票| www.8495.vip-色彩的搭配-| www.840080.com-今天的电脑彩| www.269187.com-v10彩票app-| www.32972.com-体彩第19044期| www.484849.com-怛大彩票app下载| www.177585.com-快三在线全天计划网| www.338945.com-星空彩票下载| www.384988.com-哈尔滨彩票大王视频| www.700211.com-沈阳市体彩中心地址| www.801045.com-彩票天天彩选四开奖| www.903896.com-博彩平台出租出售| www.1to.com-福彩3d五行走式图| www.966087.com-山东福彩助手app| www.9zq.com-踏着七彩祥云| www.047147.com-288彩票官方网| www.922869.com-体育彩票店过户| www.74iy.com-环球彩票登录平台| www.886389.com-釉下五彩绘画技法| www.972622.com-彩铅画春天-| www.yg7.com-内蒙古快三遗漏豹子| www.rb17.com-体育彩票七位数开奖| www.756627.com-手机淘宝买彩票| www.854861.com-极速快三模拟器| www.925531.com-天不彩彩富网| www.982591.com-江苏快彩3-| www.ai33.com-一定牛彩票网手机版| www.xv01.com-80彩票-| www.23eq.com-蓝球竟彩计算器| www.022.website福彩69期开奖| www.508840.com-华夏时时彩的网址| www.63818.com-河南一彩礼标准| www.59935.com-江苏福彩快3规则| www.0040.live-彩票七位数字密码| www.959619.com-彩票稳定计划团队| www.128759.com-36o彩票快三| www.95689.com-哪一年有双色球福彩| www.4000.cn-最准的欧赔博彩公司| www.89732.com-彩票分为-| www.5fc.cc-彩乃奈奈中文百度云| www.16117.cc-山东彩票十一选五走| www.318326.com-永利彩票官方网站| www.443898.com-体育彩票直播频道| www.598619.com-凤凰彩票f83代理| www.850765.com-快三高手求带| www.716166.com-彩铅画竹-| www.983788.com-线上彩票app| www.ym43.com-今日说法彩票骗局| www.016523.com-快三立体走势图河北| www.108489.com-倍投彩票能稳赢吗| www.201019.com-七星彩口诀精华版| www.569571.com-彩票中奖的民事纠纷| www.kc91.com-中国彩票骗局| www.64rr.com-微信足彩交流群| www.3208.com-凤凰彩票充值破解| www.518900.cc-乐米彩票官网登陆| www.593951.com-北京七波彩国际贸易| www.667600.com-彩票官员米老鼠| www.176234.com-江苏快三计划官网| www.620020.com-釉上彩的种类| www.684611.com-福彩3d钱王点评| www.833858.com-好彩多少钱一盒| www.930080.com-863人工彩票计划| 七彩www.53900r.com| www.894524.com-福利彩彩票开奖结果| www.973819.com-好彩分分快3| 大赢家彩票www.594911.com| www.228366.com-四川彩礼价目表| www.618382.com-足彩北京单场| www.722888.cc-体彩属于哪个部门| www.31390.com-西宁3d福利彩票| www.85836.cc-日本彩票兑奖流程| www.054355.com-福建省福彩兑奖流程| www.87827.cc-福彩3d杀码彩易网| www.979494.com-铁盒好彩-| www.797366.com-98彩票骗局的案例| www.448.live-百乐彩票网站| www.9518.in-五位数的彩票是哪种| www.936210.com-分分彩刷流水返点| www.987288.com-彩73平台-| www.ug9.cc-百宝彩票快3| www.896073.com-万豪彩票苹果版| www.979026.com-六开彩开奖2019| www.cp6635.com-安徽省快三走势图| www.hb70.com-彩运8鼎盛-| www.mb14.com-58彩票旧版-| www.463331.com-福彩3d走彩吧助手| www.723083.com-福彩1d中了多少钱| www.619789.com-彩票频率k线| www.746122.com-内蒙时彩开奖| www.226983.com-彩库宝典下载安装| www.506799.com-如何研究彩票规律| www.291508.com-手机买世界杯彩票| www.279974.com-足球胜负彩-| www.502195.com-彩礼排行最低| www.841640.com-七乐彩守号精选一注| 大赢家彩票平台www.810277.com| www.141022.com-彩99平台靠谱吗| www.389703.com-足球彩票中奖是多少| www.049036.com-东北彩王马洪平技术| www.713456.cc-《中彩那天》原文| 鑫彩网www.xcw866.com| www.97366.cc-818彩票官网| www.408884.com-彩吧彩报第一板| www.979179.com-好彩蓝莓假烟| www.us02.com-福利彩票双色球走势| www.1380.cm-奔驰彩票靠谱吗| www.255238.com-双色球彩票的玩法| www.368556.com-七星彩在线阅读| www.45nh.com-彩虹网络电视台| www.344878.com-大发彩票计划网站| www.70326.com-彩票打印机一体机| www.031862.com-人人爱彩票app| www.4277.com-好彩票官方网下载| www.867312.com-凤彩网排列三字谜| www.993917.com-网上彩票哪个正规| www.kz73.com-体彩福彩-| www.00oh.com-彩票也疯狂论文| www.044.date-众彩大乐透专家预测| www.5881.com-彩神每日预测金胆| www.802477.com-北京福彩快3销量| www.387691.com-好彩赢三张怎么提现| www.904666.com-网上购彩票app| 红旗彩票www.388634.com| www.54on.com-移动彩票是什么| www.3384.vip-福彩3d天天彩报二| www.707022.cc-福彩十二生肖下载|