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.65958.cc-精英网彩票6lcc| www.sb09.com-qq彩票群骗局揭秘| www.233461.com-湖北快三号码统计| www.350429.com-彩神uv机官方网站| www.595659.com-k彩福线路测速中心| www.93ih.com-九亿彩票注册下载| www.4727.net-香港十分彩中奖规则| www.87vj.com-手机万能彩膜批发| www.9457.cc-彩票客户数据购买| www.173612.com-浙江快三开奖号码| www.65870.com-福彩32加1多少钱| www.049652.com-怎么去买彩票| www.59796.com-网上买彩票能赢吗| www.023814.com-京东彩票网-| www.854737.com-中国体彩怎么查讯| www.wo03.com-网易彩票网彩神通| www.46pj.cc-福建福彩快讯手机版| www.117450.com-广东体彩官网首页| www.131845.com-全国结婚彩礼价格表| www.093451.com-彩58彩票-| www.946895.com-快三实时走势图| www.01ua.com-中国彩票最大奖号码| www.174889.com-玩快三能赢钱么| www.oq81.com-湖北快三实开奖号| www.94nq.com-体彩刮刮乐大奖| www.6779.cm-红彩会客户端下载| www.53191.cc-皇城彩票网官方网站| www.009609.com-彩票系统升级要多久| www.336619.com-9万彩票官网| www.12et.com-欢腾彩-| www.507102.com-宇宙彩票官网| www.604332.com-福建体彩票官网| www.674676.com-竞彩刷佣金方法| www.754422.com-彩经推荐-| www.825380.com-快三倍投必输| www.907091.com-买彩票的幸运数字| www.07oh.com-水彩星空绘画| www.34yj.com-上海足彩兑奖地点| www.779579.com-体育彩票机亏本转让| www.932234.com-七星彩三字现是几个| www.cai615.com-大发快三技巧| www.437720.com-c9999购彩网| www.200082.com-七乐彩开奖号码预测| www.872987.com-快三直选一注预测| www.995402.com-易彩票网-| www.eu10.com-腾讯彩票-| www.719311.com-广东福利彩票| www.838061.com-快三三军计划| www.811458.com-最新彩票信息信息| www.955460.com-01彩票官方网页| www.hh8.cc-安徽快三卡时间漏洞| www.rx41.com-中彩网登陆-| www.56266.cc-数字型彩票概率| www.98186.cc-足彩大彩网-| www.072290.com-秒速时时彩预测| www.355511.com-福彩3d专家杀码村| www.151212.com-彩票888下载软件| www.003174.com-红包彩票安不安全| www.822593.com-彩票网购何时恢复| www.08vq.com-3d福彩今日开奖| www.nt55.com-阜阳市福彩中心地址| www.01410.com-竞彩怎么玩-| www.35993.cc-神彩挣霸-| www.62kf.com-天空彩天下彩票资料| www.972307.com-彩票开奖结果早知道| www.19949.com-大发快三真实吗| www.604655.com-60彩票安装-| www.832860.com-788彩票开奖| www.606234.com-福彩3d八卦变号图| www.902520.com-在手机上怎么买彩票| www.984761.com-青海福彩中心电话| www.bb01.com-江西省体彩兑奖地址| www.72274.com-福彩一体机设置| www.293673.com-彩票平台哪些赔率高| www.235102.com-广东福彩手机投注站| www.368658.com-彩票一号平台| www.906854.com-分分快三怎么赌| 凤凰彩票www.3479p.com| www.40100.com-宝哥足彩14场观点| www.204515.com-江西快3彩票| www.cai51.cc-极速快三怎么玩| www.w16.cn-彩票对补技巧| www.977734.com-彩色混凝土压模材料| www.cp874.com-台北快三官网| www.531471.com-快三第一个人门户| www.631896.com-七彩云南官网| www.707318.com-河南体彩283规则| www.792100.com-体育彩票怎么卖| www.904018.com-u9彩票下载安装| www.973654.com-快三三跨-| www.as65.com-七乐彩走势图| www.d11.in-彩票开奖神器| www.41wu.com-唯彩看球历史版本| www.608379.com-福利彩票71-| www.8559.net-国家福彩中心官网| www.593494.com-七彩阳光预备节| www.672579.com-仙彩app官网| www.744328.com-美狮彩票062| www.807289.com-温州福彩中心网| www.877906.com-小说彩票中20亿| www.985410.com-腾龙时时彩计划下载| www.ds93.com-博彩漏洞赚钱违法吗| www.yo50.com-体彩手机怎么兑奖| 淘彩票www.tcp969.com| www.cp9778.com-808彩票网加急版| www.804677.com-彩之网试机号绕胆图| www.166042.com-快三过五是啥意思| www.321115.com-七星彩论坛开奖结果| www.448637.com-中国合法网上彩票| www.554760.com-时时彩走势k线分析| www.892333.cc-彩票-专业购彩平台| 彩票500万www.cp500.net| www.731920.com-北京百姓彩票网站| www.279397.com-福建体育彩票走势图| www.525547.com-彩票相关服务器| www.623122.com-彩票平台资源| www.968490.com-打开易彩堂主页| www.857118.com-神马青蛙彩开奖现场| www.676127.com-万森彩票登录平台| www.15bw.com-东北各地娶媳妇彩礼| www.2284.cc-时时彩开奖号码查询| www.cp6627.com-一分快三技巧和值| www.00977.cc-体彩牛彩涂迷总汇九| www.44598.com-菲律宾彩票平台| www.017942.com-彩票网站刷首充| www.025833.com-河南体育彩票网论坛| www.935610.com-时时彩后三定胆方法| www.953915.com-新浪爱彩足球比分| www.597273.com-举报亿彩彩票| www.579651.com-彩之源怎么下载东西| www.696830.com-乐优炫彩天天红单| www.814718.com-高频彩票会被叫停| www.939937.com-彩神8快三官方| www.04ko.com-彩铅画玫瑰绘画教程| www.805078.com-彩票121首页| www.905365.com-竞彩足球投注怎么买| www.985083.com-竞彩258彩票骗| www.hm90.com-旺彩预测软件| www.30rq.com-周五开什么彩票| www.72151.com-彩猫主页-| www.83oj.com-中国彩票七位数| www.6408.vip-盈盛彩票网站| www.89830.com-福彩高频彩销量下滑| www.84625.com-附近的福彩站点地图| www.587798.com-彩色复印机租赁费用| www.981565.com-体育彩票报刊电子版| www.vr35.com-即时开彩新版| 99彩票www.66201.cc| www.676901.com-贵阳彩色压印混凝土| www.305338.com-体彩多乐彩漏| www.412328.com-体彩手机里怎么查| www.543916.com-武汉双机彩票站转让| www.332625.com-注册京彩app| www.364744.com-2015年彩库宝典| www.562755.com-高频彩有什么漏洞吗| www.0dv.com-乐彩网彩票领跑者| www.562626.com-三地彩吧论坛| www.667651.com-体彩排列五直播视频| www.776757.com-旺彩百家号-| www.16838.com-星际彩票大发快三| www.050874.com-快三怎么玩才赚钱| www.53gj.com-有人拉我进红利彩票| www.do23.com-彩票指南报纸电子版| www.v86.shop-彩票群做托话术|