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.349799.com-人们是否应该买彩票| www.mc68.com-易彩快三大小计划| www.71.cx-滴滴彩票坑人吗| www.9287.top-鸿运乐彩可以赢钱吗| www.126372.com-二分彩属于什么彩| www.659710.com-昨天内蒙快三| www.1200.website有快三的省份| www.278975.com-大发快三豹子计划| www.071455.com-怎么下载天天中彩票| www.jx88.com-七星彩怎么中奖规则| www.10243.cc-500万足彩-| www.8321.top-最近七星彩图规| www.750082.com-七星彩4个号多少钱| www.cai966.com-湖北福彩k3走势图| www.769791.com-七彩阳光图片| www.lo34.com-彩票2元官网下载| www.420869.com-体彩贵州-| www.955.space-七星彩几位数| www.943789.com-703彩票链接| www.826033.com-超级彩票专业户| www.927471.com-福利彩票什么玩| www.dq60.com-省份快三犯法吗| www.pf36.com-快三倍投稳赢技巧| www.246688.com-竞彩快三-| www.233414.com-彩乐汇是不是假的| www.313617.com-幸运彩票有几种版本| www.90022.cc-体彩自动选号器| www.5352.wang-933彩票是真的吗| www.27070.cc-彩票数字之间的规律| www.433119.com-甘肃福彩票-| www.121472.com-彩票诈骗套路案例| www.349585.com-老彩票平台代理| www.792666.cc-开福彩店怎么盈利| www.973313.com-彩虹吉他谱女生版| www.rc43.com-极速时时彩有技巧吗| www.cp8518.com-彩票带回血骗局套路| www.3383.com-彩神全国代理| www.6037.biz-奇门测彩票位置法| www.611614.com-网上赌快三是真的吗| www.152316.com-完美彩票app| www.405338.com-内蒙快三开奖情况| www.537501.com-有彩色和无彩色搭配| www.684200.com-彩八app网址| www.780227.com-梦图解码七星彩大全| www.876114.com-蓝精灵彩吧图| www.972232.com-大众彩票合法吗| www.t49.org-坦洲福利彩票投注站| www.853889.com-亚博竞彩下载| www.948097.com-四川体彩网官方首页| www.04cs.com-蛙扑彩票-| www.971934.com-乐彩网双色球首页| www.3547.cm-彩票机器做手脚| www.59918.cc-微彩吧从哪下载| www.291832.com-重庆大快三下载| www.390051.com-买彩票亏了几万元| www.41111.com-下载中彩网_中彩网| www.801336.com-富彩彩票是哪里的| www.921374.com-幸运快三豹子计划| www.981246.com-彩霸王三星做号软件| www.dg44.com-新福彩快三下载安装| www.k01.net-速盈彩票是骗局揭秘| www.62qd.com-智能彩票分析软件| www.8920.vip-乐8网彩票是真的吗| www.41040.com-福彩3d杀码村| www.d22.shop-体彩七星开奖号码| www.6642.xyz-乐米彩票不能用了| www.45599.com-微彩特区七星论坛| www.911549.com-家彩论坛千禧试机号| www.674503.com-哪里能查足彩销量| www.773295.com-中国彩票开奖直播| www.546605.com-体彩退机申请文本| www.120480.com-重庆时时彩有官方么| www.h46.net-乐彩网双色球静态版| www.76iq.com-彩票开奖走势带| www.3276.biz-体彩顶呱呱中奖图片| www.389867.com-彩02彩票官方下载| www.522929.com-时时彩万位是第几球| www.593600.com-福彩过滤软件| www.676683.com-今晚七星彩票开结果| www.759781.com-福彩3d谜底图| www.830452.com-主任中彩票-| www.929802.com-天天中彩票计划| 新盈彩www.xinyc3.com| www.xm22.cc-江苏快三有哪些技巧| www.8309.org-福彩三d新吧第一版| www.39239.cc-网络彩票作假吗| www.89167.com-网易福彩3d走势图| www.184142.com-河北快三套选中奖| www.268930.com-go彩票砍龙可信吗| www.355463.com-河内五分彩稳赚技巧| www.911970.com-安徽安徽彩票快三| www.970612.com-凤凰彩票计划软件| 大赢家彩票平台www.711893.com| www.kn98.com-易彩大小规律| www.zi58.com-往期彩票中奖号码| www.06106.com-体彩竞彩提成| www.59811.com-微彩吧举报-| www.031828.com-玩彩网彩票可靠吗| www.111968.com-酷彩吧彩票平台| www.180090.com-快三投注技巧| www.237863.com-派彩-| www.167589.com-安徽快三开奖查询| www.867393.com-体彩正版天庚图谜| www.895915.com-彩票试机号-| www.964404.com-2元彩票下载安装| 500彩票www.573678.com| www.le47.com-彩中彩app下载| www.5cg.com-3d字谜新彩网牛彩| www.18tg.cc-周五彩票出什么| www.598.win-希腊五分彩开奖结果| www.700639.com-彩票破解器是真的吗| www.775823.com-90彩票平台登陆页| www.883043.com-龙胜国际投彩正规吗| www.956179.com-14场胜负彩奖金| www.993687.com-足彩胜乎负十四场| www.wb2.com-排列五彩经网走势图| www.115069.com-讧苏福彩-| www.403360.com-唐启伟福彩主任是谁| www.506815.com-彩票能研究出来吗| www.041377.com-快三彩票破解| www.138081.com-非法彩票app| www.201315.com-七星彩技巧和方法| www.252309.com-全民彩票老版| www.308146.com-江苏快三预测和值| www.358223.com-竞彩店转让信息| www.426459.com-瑞彩网是什么| www.503785.com-喝彩的彩是什么意思| www.561638.com-买彩网一彩票指南| www.621248.com-凤彩网字谜汇总| www.691676.com-大乐透彩乐乐机选号| www.767883.com-旺彩双色球2017| www.830758.com-免费l彩票资料大全| www.883084.com-彩投是什么-| www.945700.com-快三开奖号码上海| www.983148.com-趣彩彩票app| www.cp6123.com-中彩彩票网-| www.pj78.cc-小镇买彩票能赚钱吗| www.2cl.cc-什么时间买彩票最佳| www.55jc.cc-体彩网点申请流程| www.763.biz-竞彩店申请书| www.4707.xyz-彩票一张多少钱| www.15998.com-内蒙快三出啥号| www.8262.cn-聚聚彩下载-| www.41627.com-中华彩吧快三| www.003693.com-深圳风彩票开奖查询| www.cai1500.com福彩快三走势图今天| www.yg03.com-派彩电子走势图大全| www.557901.com-买福彩快三开奖结果| www.621921.com-福彩三d中奖宝典| www.51279.cc-广西快三计划全天| www.1519.com-中国体育彩网排列五| www.356233.com-慧金彩-| www.489558.com-福彩3d中天图库网| www.588456.com-彩票管家真实吗| www.654747.com-七星彩图规欣赏| www.755379.com-五福彩票网手机版| www.820949.com-废彩钢板多少钱一吨| www.883038.com-手机投彩是骗局吗| www.946386.com-彩票软件注册送彩金| 全民快乐8www.qmkl1.com| www.wu2.cc-乐彩3d论坛网| www.pj88.cc-足球彩票对阵表| www.385255.com-彩票真的作弊码| www.537718.com-深国彩-|