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天

知道了
彩票123现在叫什么名字 www.112822.com-火箭彩票站-| www.5457.pw-高手网特彩吧齐中彩| www.2062.vip-台湾彩虹论坛| www.87mb.com-足彩竞猜挣钱| www.99399.cc-新浪体育足彩开奖| www.098199.com-福利彩票3d下载| www.179882.com-河北快三开奖走势图| www.265908.com-网上彩票诈骗套路| www.hw08.com-北京快三官网投注| www.604609.com-新粤彩100网彩图| www.958001.com-狂神七星彩今晚| www.yi25.com-体彩第19048期| www.616215.com-体彩扑克任选玩法| www.742789.com-头奖彩票下载并安装| www.886312.com-彩铅画图片大全简单| www.cai6177.com江苏快三基本走势图| www.qw16.com-福建福彩开奖今天| www.32og.com-大远洋竞彩推荐| www.434889.com-天天好彩十二生肖表| www.032038.com-靠谱的彩票投注软件| www.869745.com-老版的唯彩看球| www.485555.com-正规网彩平台| 万利www.32123k.com| www.062419.com-彩票166网-| www.163254.com-星耀国际彩票托| www.866694.com-我想找那个福利彩票| 500彩票网www.616097.com| www.2144.me-全民彩票能提现吗| www.68ol.com-乐彩真的能赚钱吗| www.02488.com-二元彩票网3d| www.667420.com-体彩中奖号码今天的| www.cai4455.com河南快三走势| www.183219.com-福利彩票快3是什么| www.940729.com-足彩胜负分析| www.756644.com-加州彩票开奖| www.913585.com-彩吧彩民之家| www.997584.com-快三杀号五技巧| www.ru84.com-90彩票网址-| www.33rr.cc-彩票店利润点在哪| www.015433.com-七星彩兑奖码查询| www.312327.com-甘肃福利彩票网网址| www.789113.com-模拟彩票软件| www.72306.com-河南最快快三| www.172361.com-喜乐彩中奖查询| www.526703.com-八喜彩票官网| www.736771.com-平台彩票安全吗| www.095017.com-pc蛋蛋预测彩票| www.68se.cc-中乐彩怎么样| www.86211.cc-天吉网彩票论| www.958438.com-今晚七星彩直播现场| www.yi17.com-福彩快8app-| www.46jl.com-彩金多少钱一克回收| www.1692.org-彩票5950-| www.18158.com-完整版足球竞彩比分| www.507167.com-体彩5开奖连线2元| www.293138.com-易彩注册-| www.771012.com-极速北京快三| www.859327.com-彩民彩票app官网| www.ru7.com-快三买大小单双技巧| www.30ed.com-体彩顶呱呱怎么纳税| www.993540.com-今日竞猜足彩推荐| www.dj93.com-福彩骗局大揭秘| www.13237.cc-公益体彩乐善人生| www.259225.com-竞彩足球比分澳客网| www.258591.com-湖北快三计划| www.505034.com-休彩排到三走势图| www.556996.com-福利彩票交税| www.646804.com-胜负彩14场机选| www.735792.com-高薪聘请彩票分析师| www.9093.vip-七乐彩中奖查询单是| www.077578.com-今天七星彩奖表图| www.145046.com-福彩3的最新杀码| www.271667.com-好彩1几点截止投注| www.380400.com-七乐彩一般多少奖金| 财神网www.29277b.com| www.945168.com-腾讯10分彩-| www.fn95.com-创彩网快三-| www.0030.wang-啥子彩票八位数| www.20044.cc-快三分析真的吗| www.036707.com-快乐彩五行排除法| www.60940.com-福利彩票0312| www.137344.com-中国体彩报官网| www.ke00.com-赌博买彩票破产| www.887977.com-开体育彩票店流程| www.mt7.com-福彩快三哪个平台好| www.130991.com-七星彩官方网站| www.113113.com-竞彩猫直播预测| www.050380.com-玩手机黑彩怎样赢钱| www.579902.com-如何加盟彩票投注站| www.828860.com-彩票真实性论坛| www.71371.com-辽宁福彩双色球现场| www.018831.com-汇彩网挣钱靠谱吗| www.080833.com-7星彩开奖结果查| www.297339.com-快三能手机上玩| www.12146.com-广西快三长龙特别多| www.118123.com-福彩3d海南大公鸡| www.343449.com-辽宁体彩十二选五| www.cai1313.com快三投注平台合法吗| www.27648.com-彩票开奖118期| www.66146.com-时时彩后四做号软件| www.931606.com-体彩19047期| www.979728.com-福彩网站下载安装| www.de88.com-秒速飞艇ttc彩票| www.031378.com-体育彩票是否真实| www.986405.com-彩票课堂-| www.bs38.cc-11选5购彩平台| www.rs88.cc-彩票解码软件| www.z25.org-爱购彩手机登录| www.586528.com-糖果派对掉彩金图片| www.672279.com-免费领取彩金| www.792.cm-彩票如何赢钱保盈| www.466.bid-遇到一个玩彩票的托| www.8896.cn-竞彩串关中奖分析| www.817629.com-竟彩足球彩票胜平负| www.09236.com-彩39购彩-| www.081777.com-护肤彩妆加盟| www.44ws.com-旋风彩虹机图片| www.2110.cn-彩虹五号无人机售价| www.9944.biz-七星彩票今日开奖| www.et40.com-优信彩票app| www.xs85.com-买彩票中了50万| www.36zq.com-七星彩145-| www.194.biz-彩铅画图片大全作品| www.2547.xyz-怎样绘制彩票k线图| www.9699.wang-彩票实体店行业发展| www.57827.cc-南宁福骰快三| www.050407.com-天天买彩票下载| www.144016.com-河北体彩竞猜彩足球| www.958891.com-彩票开奖什么软件好| 500彩票www.593500.com| www.hm68.com-时时彩包胆看号技巧| www.vr89.com-3d福彩专家预测| www.30da.com-彩虹六号季票多少钱| www.4225.com-广州七波彩国际贸易| www.9610.com-杭州竞彩店合作| www.35716.cc-彩票99单机游戏| www.052786.com-826彩票下载安装| www.30av.com-今晚彩票开什么号| www.717949.com-彩票胆组什么意思| www.839925.com-云南体育彩票网站| www.959712.com-下载盈彩网-| www.l37.biz-81彩票坑人-| www.739354.com-凤凰生活福彩投资| www.265586.com-网易胜负彩专家预测| www.615243.com-开发彩票app| www.948112.com-好彩网预测3d福彩| www.gv15.com-彩票返点分配下级| www.394746.com-今天哪个彩票开奖| www.984051.com-老猫出彩-| www.da51.com-快三属于彩票吗| www.289005.com-全民双色球彩票下载| www.82128.cc-福彩开奖查询| www.131889.com-滨州结婚彩礼价格表| www.8574.vip-易彩首页-| www.081616.com-吉林体彩11远5| www.276653.com-快彩网官方网站| www.950985.com-彩运8是做什么的| www.cp7337.com-腾讯快三-| www.08vu.com-尼彩大屏智能手机| www.4403.vip-体彩排排列三中奖号| www.173888.com-彩神大发app| www.617767.com-铜陵体彩中心地址| www.997034.com-欢乐彩官网开奖结果| www.e75.cc-七乐彩同期历史号码|