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.973489.com-彩虹图片大全图片| www.eu47.com-彩票争霸谁与争锋| www.e72.club-七乐彩奖金分配等级| www.35pj.cc-快三助理-| www.62867.cc-彩票诈骗怎么判| www.079053.com-资料大全丨牛蛙彩票| www.258961.com-14胜负彩最新开奖| www.352925.com-一支彩染发剂多少钱| www.447967.com-怎么在网易买彩票| www.539507.com-彩宝贝预测汇总对比| www.612362.com-雪中彩影官方网站| www.684626.com-福彩3d中奖组选| www.785149.com-海南7星彩高手| www.867294.com-快三挂机稳赚| www.933077.com-网赌时时彩惨痛经历| www.984975.com-彩运开心聊下载安装| www.894957.com-彩票代投兼职群| www.962857.com-福彩三d今日字画谜| 皇家彩票www.92967a.com| www.jh62.com-百度福彩3d字迷| www.p11.live-2元彩票容易中大奖| www.60kl.com-福彩老北京彩吧图库| www.2307.wang-彩票店上班大忌| www.22562.com-齐鲁彩票开奖结果| www.779626.com-网购彩票合法| www.870538.com-凤凰彩票提现不了| www.947576.com-微信买足彩-| www.996717.com-福利彩票手机机选| www.ap06.com-毕节彩票-| www.xc44.com-河北体彩网排五预测| www.858825.com-彩票网站搭建教程| www.940644.com-福彩3d百个差| www.997880.com-乐彩网摘字谜总汇| www.ox18.com-福彩3d技巧口诀| www.553252.com-竞彩三串一中一千万| www.637536.com-上海体彩站点电话| www.453656.com-江苏老快三推荐| www.555066.cc-uu博彩-| www.618714.com-永久彩票下载| www.691623.com-烟台福彩官网| www.783653.com-中乐彩是正规网站么| www.866620.com-内蒙快三百度贴吧| www.927937.com-买三位数的彩票| www.979604.com-一品彩票-| www.cp839.com-福彩快三app| www.kj48.cc-快三下期和值怎么看| www.a42.org-彩九官方网站| www.22ty.com-福彩摇奖模拟器| www.87lk.com-彩票扫描识别中奖| www.1830.vip-摇一摇福彩双色球| www.9250.in-万达彩票咋样| www.39113.cc-彩票开奖公告今天| www.80500.com-国彩骗局揭秘| www.044044.cc-3d彩民乐钱图| www.268568.cc-体彩助手app下载| www.384665.com-大王彩票网-| www.595772.com-五福彩票最新821| www.691886.com-足彩十四场奖金| www.810722.com-彩票软件的制作| www.901995.com-彩6彩票网页版| www.996826.com-云南快乐十分爱乐彩| www.ju82.com-彩虹颜色-| www.04jd.com-众彩网3d专家叶子| www.376.me-鸿运彩双色球| www.6368.me-sk彩票是不是正规| www.35323.cc-逆袭彩票计划手机版| www.96998.com-三地乐彩网曲线图| www.253093.com-甘肃好彩-| www.417369.com-在开封开体彩店| www.579622.com-360领导者彩票| www.08bq.com-七星彩免费阅读全文| www.2708.com-体彩18054期| www.17231.cc-网络彩票时时彩诈骗| www.91255.cc-好彩香烟柠檬| www.093335.com-彩色沥青造价| www.206028.com-体彩第19017期| www.322319.com-128彩票平台| www.449855.com-运城老张体彩| www.579486.com-体彩排列三精品杀号| www.686018.com-南京福彩开奖号码| www.798535.com-百盈快三助赢软件| www.901940.com-亚博体育假彩票棋牌| www.988767.com-腾讯乐彩-| www.gm11.com-福彩网055dcc| www.4fy.com-天天中彩票人工客服| www.208.tv-沈阳彩票销售员招聘| www.03835.com-不要彩票-| www.559902.com-外国彩票收藏| www.725068.com-福彩3d布衣独胆王| www.850075.com-美国一分彩走势图| www.952074.com-北京快三平台下载| www.cp9908.com-易彩快3规律| www.yd93.com-大韩国快三-| www.87qe.com-鼎丰彩票-| www.38318.cc-内蒙时彩开奖| www.015294.com-巨丰彩票jf-| www.130547.com-快彩王是什么情况| www.256629.com-手机彩票投注客户端| www.369580.com-彩民社区49369| www.539105.com-产品彩票促销| www.766425.com-竞彩足球怎么买不了| www.885071.com-内蒙体彩中心| www.995094.com-巴登五分彩-| www.kp03.com-乐成彩票app| www.21mw.com-8618彩票-| www.22862.cc-腾讯快三是违法的吗| www.90399.cc-福利彩票摇号机| www.098817.com-传统彩票-| www.206873.com-搜索网易彩票| www.320368.com-百宝彩湖北十一选五| www.436599.com-竞彩5800万-| www.558335.com-奥客竞彩足球直播吧| www.813184.com-下载如意彩票软件| www.iz37.com-多彩网辽宁12选五| www.69395.cc-博客彩登录-| www.eb71.com-台北快三走势| www.451885.com-体彩排列三跨度预测| www.gz91.cc-北京快三最晚几点| www.026167.com-彩票兼职代打| www.07798.com-长沙体彩店有多少家| www.397308.com-南宁福利彩票站利润| www.303007.com-香港赛马会博彩公司| www.528135.com-快三走势图带连线图| www.738779.com-章鱼彩票群号| www.978528.com-福彩3d银海图| www.181879.com-中彩网下载安装| www.39or.com-七星彩一位杀号方法| www.533469.com-彩票计划倍投方法| www.793617.com-彩票咋算-| www.355614.com-玩彩票跟计划的技巧| www.259906.com-上海卖体育彩票的| www.802323.com-福利七乐彩开奖结果| www.5vf.com-好彩vip彩票首页| www.1942.tv-体彩怎么看开奖| www.80340.com-今日体彩排列三奖号| www.20978.cc-网上彩票诈骗| www.778100.com-cc分分彩计划软件| www.64zx.com-中彩吧是啥彩票| www.8563.top-共赢彩票下载安装| www.106689.com-计划快三软件| www.258880.com-彩票专业在线选号器| www.467844.com-马耳他福彩-| www.636467.com-彩虹六号高清图片| www.15xy.cc-爸妈要100万彩礼| www.960304.com-彩票亿元大奖一览表| www.291731.com-鸿彩投注下载| www.872084.com-云南体彩中心地址| www.543243.com-福彩三的牛彩图迷| 彩票宝www.6cpb.com| www.wt49.cc-中彩网是什么网站| www.99912.com-浙江体彩在线| www.iq91.com-江苏体彩七专家预测| www.032997.com-彩票对刷教程| www.79ej.com-福利彩票六加一规则| www.607110.com-体彩最新-| www.35ad.com-快速赛车e赢彩| www.426729.com-旭彩苑-| www.60115.com-2019体彩新规| www.877718.com-购买网上私彩| www.87219.com-速赢彩app-| www.809528.com-全彩助手下载| www.346.me-怎么攻击黑彩网站| www.065925.com-雨后彩虹图片| www.500038.cc-彩票性缘贴吧|