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.nq.cc-下载福彩手机选号| www.889106.com-南方彩票开奖走势图| www.962447.com-贵州彩票兑奖| www.cai5678.cc-老吉林快三走势图| www.105098.com-买体彩的正规软件| www.209236.com-河北福彩排5| www.135498.com-彩票账对不上| www.77869.com-彩票软件店主版| www.279651.com-高频彩票设计的原理| www.383237.com-19039期体彩| www.079113.com-生肖彩票中奖规则| www.260418.com-赌博和彩票-| 大赢家彩票平台www.916720.com| www.un46.com-乐彩首页-| www.237946.com-福利彩票自动选号器| www.400219.com-彩绘网纹漆衣陶盥缶| www.578676.com-彩票店店面布置| www.662003.com-竞彩2串1中奖故事| www.770946.com-网彩平台代理违法吗| www.870674.com-2元彩票3d-| www.955840.com-彩票是否存在作弊| www.cai5966.com湖北快三一定牛| www.362468.com-赞美之泉《彩虹》| www.771504.com-新未来时时彩漏洞| www.44555.cc-酷彩吧骗人-| www.019497.com-青海快三购买技巧| www.103922.com-彩票最低中奖多少钱| www.89qx.com-篮球竞彩分析经验| 500万彩票www.96386b.com| www.222.top-九龙国际彩票平台| www.6900.vip-云彩-| www.976604.com-晋城结婚彩礼标准| www.020409.com-彩12下载-| www.609914.com-百彩网资料网址| www.803912.com-新2彩票app注册| www.998336.cc-福彩票3d开奖号码| www.e86.club-七乐彩历史同期| www.576481.com-唐山体彩中心地址| www.827252.com-下载3d彩易网| www.976074.com-论彩礼-| www.21758.cc-湖北快三计划范哥| www.6910.net-七彩影院没有网络| www.27699.com-中国福彩门头| www.j23.in-人人买彩票app| www.748178.com-大富豪彩票合法吗| www.895413.com-华彩骗局-| www.990648.com-江苏省e球彩| www.jq04.com-分分彩输了十万| 500彩票www.50051p.com| www.jk21.com-快三客-| www.097177.com-快三追豹子追不到| www.gj35.com-多乐彩开奖号码| www.410381.com-爱尔兰彩票官网| www.678752.com-竞彩篮球的胜负结果| www.2293.vip-彩票中奖后多久到账| www.9992.cn-进口彩妆那个最好| www.334335.com-香港开彩规律| www.075455.com-彩32-| www.162191.com-大运彩票官网| www.394289.com-极速分分彩官方开奖| www.316572.com-福彩标志图片大全| www.531666.com-彩票数字公式| www.627207.com-虎扑彩票-| www.715805.com-双色球新彩吧预测| www.800591.com-博达彩票是真的吗| www.813450.com-福彩体彩改制| www.935072.com-天天赢彩票正规吗| www.c2.hk-好彩投提现的危害| www.3on.cc-赢钱彩客服-| www.096.date-帮博彩收款-| www.940937.com-彩票培训课程| www.9um.com-七星彩两码定位打法| www.526652.com-时时彩后二组六| www.285165.com-时时彩要改时间了吗| www.vn27.com-快3属于什么彩票| www.448227.com-福彩3d19030| www.700036.cc-五分时时彩合法吗| www.261448.com-多赢吉林快三app| www.46673.com-时时彩宝典软件下载| www.088179.com-澳客彩票安卓| www.693388.com-2019年竞彩政策| www.762519.com-5k彩票会员登录| www.823866.com-天吉彩票预测论坛网| www.886213.com-大地彩票app下载| www.948569.com-内蒙古快三微信群| 网易彩票www.140599.com| www.320950.com-明发彩票网址| www.96711.cc-足彩大赢家比分直播| www.so53.com-今日彩票预测3d| www.10qp.com-神龙彩票骗局| www.70mf.com-七乐彩奖池查询| www.899811.com-彩83app苹果| www.964707.com-中彩网双色球打擂台| www.cai0622.com腾讯快三官方网站| www.088486.com-足彩开奖奖金| www.284043.com-什么彩票是六位数| www.17594.com-体育彩票31-| www.843083.com-竞彩8串1返还率| www.1000.pro-小乐彩app-| www.666730.com-乐彩网怎么充值| www.222927.com-彩票预测大师下载| www.566455.cc-福彩出的什么号码| www.706210.com-发彩网平台靠谱吗| www.820569.cc-七星彩直播现场视频| www.946919.com-甘肃快三对子技巧| www.au0.com-快三追遗漏输钱| www.29pl.com-昨天体彩号码| www.1750.wang-鸿彩主播小浪| www.425020.com-高频彩人工计划网| www.538280.com-彩云国秘抄重华| www.607857.com-体彩与福彩加盟条件| www.682253.com-提现到微信的彩票| www.384023.com-春秋彩票注册| www.514566.com-卖彩妆的店-| www.627072.com-香港红财神彩图| www.726769.com-福彩自助售票机加盟| www.798968.com-竞彩比分查询| www.890234.com-大盛游戏彩票网站| www.964630.com-足彩14场最新分析| www.927733.com-极速快三直播| 全民汇彩票www.52303x.com| www.l23.cc-棋牌彩票代理| www.258267.com-彩票数据分析| www.536389.com-美国有什么彩票| www.630731.com-彩乐爆怎么样| www.691813.com-网上博彩有赢的吗| www.785971.com-xr有原彩吗-| www.gx24.com-日本彩票广告合集| www.p24.tv-4位数买什么彩票| www.70xp.com-时时彩开奖app| www.0683.org-彩票店装修样板| www.893756.com-大财神彩票-| 500彩票www.52072y.com| www.650739.com-十字彩是个什么东西| www.905452.com-去哪买足彩-| www.639521.com-彩票店开不下去了| www.739839.com-中国福利彩票助手| www.849298.com-运盛彩票网站| www.969143.com-福彩公益金使用违规| www.0pb.com-无忧彩漫-| www.85dq.com-福彩图谜丹东全图| www.132387.com-彩礼超过两万犯法吗| www.968614.com-彩6计划群-| www.rc84.com-香港彩票走势图| www.063802.com-七星彩私彩代理会员| www.514.xyz-中国体育彩票群| www.293852.com-快三长龙助手免费版| www.167329.com-宁夏快三开奖结果| www.295886.com-快速查彩票开奖结果| www.109236.com-hk百彩-| www.393018.com-彩铅画图片人物动漫| www.19224.com-福彩跨省兑奖| www.3636.space-足彩篮彩哪里买| www.xq31.com-新浪彩票投注平台| www.63455.cc-今晚足彩14场分析| www.50vb.com-87彩票怎么换店铺| www.577.red-竞彩网足球360| www.143017.com-彩虹8平台网址| www.65136.com-三的福彩图-| www.1231.org-新彩票计划app| www.380656.com-鲁豫讲彩票视频| www.42cl.com-七彩球灯-| www.039151.com-36o购彩网-| PK彩票www.181599.com|