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天

知道了
亚洲28 www.8652.xyz-江苏快三倍投合法吗| www.069745.com-重庆桥洞彩票男| www.475989.com-北控国彩是什么彩票| www.874834.com-辽宁快乐十二彩票| www.881739.com-辉煌彩票官网| www.61uy.com-极速快三玩法窍门| www.44292.com-3彩短外套羽绒| www.3282.biz-彩票宝网站-| www.137020.com-金彩网彩票资料| www.364414.com-官网彩票有哪些种类| www.591068.com-购买足球竞彩app| www.770992.com-分分彩智能计划软件| www.971406.com-彩客彩票客户端苹果| www.wg98.cc-彩神全能版-| www.568.website中华彩票网上买| www.2023.vip-能玩彩票和棋牌| www.456336.cc-快钱彩app安全吗| www.844333.com-竞彩理论知识| 幸运彩票www.5095e.com| www.44163.cc-下载福建快三走势图| www.127059.com-彩虹论坛-| www.267716.com-三分快三开奖结果| www.622605.com-福福彩彩票站多少钱| www.11127.cc-澳客网足彩预测分析| www.240133.com-五分彩反计划怎么买| www.487588.com-福利彩票加盟挣钱吗| www.662482.com-登录全民彩票| www.6205.cm-彩票之家解正版成语| www.341573.com-彩票宣传语录| www.532575.com-搭车七星彩梦图解码| www.kg38.com-银川福彩中心地址| www.9847.com-古建彩绘图案贴纸| www.006230.com-完美彩票网站下载| www.197388.com-吉隆坡博彩-| www.416755.com-旋风彩虹机图片| www.543882.com-3d彩吧图第五版| www.659450.com-天空彩票与我同行日| www.762853.com-旭彩美缝剂电话号码| www.cai906.cc-中国福利彩票快3| www.13mk.com-3d彩吧图库一版一| www.001065.com-中彩网3b试机号| www.464256.com-类似好彩爆-| www.718663.com-彩虹七色-| www.919078.com-大地彩票是合法的吗| www.op87.com-荣鼎彩是什么| www.104.com-博彩接口怎么接入| www.055921.com-七星彩怎么算中奖图| www.644248.com-足彩19039佬牛| www.ir11.com-足球竞彩分析预测| www.1061.vip-跟彩名堂一样的软件| www.181878.com-彩中彩下载-| www.312357.com-福利彩票三d字迷| www.485004.com-快三如何判断单双| www.620599.com-福彩3d带坐-| www.795877.com-乐彩网用户注册| www.920335.com-825彩票下载| 500彩票www.50080w.com| www.160234.com-563彩票下载| www.95pm.com-私彩开奖-| www.4649.vip-竞彩胜平负数据| www.10408.com-进球网竞彩推荐| www.67859.cc-贵州快三预测开奖| www.044474.com-胜负彩星号什么意思| www.369544.com-福彩3d?d走势图| www.2895.xyz-开心8时时彩| www.09996.cc-祥金彩票-| www.57561.com-澳客买彩票靠谱吗| www.006526.com-幸运彩乐园app| www.082612.com-乐彩网-官方网站| www.171002.com-彩票开奖结果i| www.244589.com-彩票大乐透下期预测| www.323291.com-彩民福利-| www.393139.com-今天彩票是什么| www.523782.com-时时彩解析软件| www.597287.com-吉林省快三形态走势| www.670524.com-新浪体育彩票应用| www.747855.com-爱彩宝软件下载| www.816730.com-时时彩漏开怎么回事| www.897129.com-彩票能发网上吗| www.963473.com-七乐彩定胆杀号| www.cai4777.com平台快三-| www.ka52.com-新3d彩票计划| www.g22.net-苹果彩票下载安装| www.70862.com-体彩送彩金-| www.63811.cc-36彩票全国开奖| www.031578.com-360快三杀号定胆| www.129013.com-众彩幸运每一天登录| www.jz05.com-刮彩票的破解方法| www.s40.cn-河北快三数据统计表| www.47ri.com-彩票大小投注技巧| www.645.cn-1彩票开奖结果| www.623816.com-14场胜负彩app| www.710169.com-注册首存彩金| www.807224.com-温州体彩店转让| www.891087.com-大发快三在哪买| www.966255.com-时时彩带单骗局| 大赢家彩票平台www.810625.com| www.it51.com-竞彩足球比分比| www.zx49.com-下载重庆市彩开奖| www.25nh.com-华彩谢茂全简历| www.9385.vip-河北彩礼多少钱| www.49611.com-井彩荃人人网| www.7675.top-福彩3dapk-| www.76845.com-中国体育彩票双色求| www.074907.com-哈尔滨彩票中奖故事| www.062883.com-淘宝彩票官网可靠吗| www.144734.com-竞彩足球单场分析| www.101187.com-中彩网开挂-| www.167120.com-快三口诀逢3下15| www.253849.com-彩票app下-| www.322297.com-128彩票网app| www.384896.com-创建彩票网站平台| www.501126.com-希腊三分彩开奖时间| www.579147.com-福彩会中奖吗| www.659864.com-彩票查看双色球| www.733207.com-一分钟时彩骗人的| www.801899.com-老人家爱体彩| www.874760.com-亚博彩票官网下载| www.638132.com-上海体彩店地址| www.720737.com-网上的天天乐彩票| www.853963.com-极速时时彩怎样玩| www.922298.com-北京招聘足彩分析师| www.978937.com-随时随地畅玩彩票| www.it2.cc-彩票平台刷流水技巧| www.9352.loan-谁主管福彩-| www.58639.cc-3d银海彩报ab| 双彩网www.965960.com| www.il85.com-下载二二彩票| www.xg61.com-皇都彩票一分快3| www.19bq.com-深圳体育彩票中奖| www.84cv.com-221黑彩案件| www.0696.vip-开福利彩票店的流程| www.906312.com-彩票7-| 旺旺彩票www.404499.com| www.vu01.com-惠民彩票邀请码| www.877.cc-彩铅画入门教程视频| www.337002.com-广西快三淘宝| www.181952.com-河北快三走势图一| www.vw97.com-手机快三怎么玩| www.87su.com-黑彩软件app| www.4587.cn-699彩票靠谱吗| www.010861.com-重庆时时彩智能追号| www.3756.biz-开心七星彩精彩论坛| www.254765.com-好彩投app-| www.84998.com-民政部彩票发行| www.102847.com-时彩平台-| www.981482.com-中国足彩竞彩网| www.639549.com-竞彩申请名额| www.730157.com-彩尊登录原版| www.803789.cc-微信群买彩票可靠吗| www.997281.com-彩帝彩票-| www.45tg.com-下载盛大彩票软件| www.0125.vip-彩色是几种颜色| www.6594.net-玩彩吧官网-| www.15704.com-一定牛快三预测| www.70957.cc-送彩金的彩票手机版| www.026545.com-泰国利记博彩| www.051106.com-中国福福利彩票| www.028632.com-福彩3d综合走图| www.683813.com-誉彩彩票平台| www.490107.com-小白彩票新版| www.588116.com-精彩十分图片| www.726684.com-玩转彩票app下载| www.902662.com-极速快三怎样买赚|