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.598695.com-有人买彩票中奖的吗| www.577280.com-首页青蛙彩票导航网| www.760032.com-福彩助手ios| www.852753.com-彩票怎么玩儿的| www.792663.com-彩票和值-| www.897017.com-快三和值选号法| www.979867.com-彩票站每日交接记账| www.58113.com-网上体彩投注app| www.134521.com-好彩香烟哪个好抽| www.922170.com-下载一定牛江苏快三| 500彩票www.330637.com| www.ut08.com-鸿彩五分快三| www.15ue.com-彩票站低价转让| www.0202.me-万和城彩票平台注册| www.623576.com-彩票六等奖-| www.750313.com-全民彩票免费下载| www.7670.cc-一出好戏彩票| www.89507.com-彩民高手坛ww| www.9108.vip-多彩贵州网黄平频道| www.60486.com-网易彩下载-| www.389578.com-体育彩票19032| www.3080.cc-福彩天天选四中奖号| www.26969.cc-富彩app-| www.co23.com-福彩玩彩老头网站| www.307592.com-湖南体彩排三论坛| www.ga81.com-江苏快三代理网| www.82ym.com-彩印月租费怎么取消| www.6538.net-祥金彩票网站| www.27.org-中国彩票主任| www.908.la-老版彩库宝典手机安| www.kf15.com-玩京东彩票幸运28| www.07lx.cc-体彩排列三的返奖率| www.8068.in-色彩创意画水彩| www.582376.com-山东体育彩票贴吧| www.702.xyz-江西时时彩专业版| www.197000.com-彩票123网站| www.330536.com-长春彩溢会所流程| www.828632.com-长沙福彩自助投注机| www.934611.com-福彩今天奖号| www.993074.com-三分彩基本走势图| www.cy68.cc-福彩快三网赚| www.l34.me-吉林快三中奖金额| www.61ys.cc-源代码彩票-| www.1669.in-体彩走势图500期| www.11975.com-下载福彩投注网站| www.62653.cc-今晚七星彩开码结果| www.010599.com-491彩票网址| www.451299.com-游彩网登录-| www.90861.com-彩票开奖排-| www.074811.com-彩票店代买彩票| www.108915.com-盈彩彩票手机软件| www.927165.com-体育彩票彩种介绍| 开心彩票www.257512.com| www.qt06.com-福彩里有pc28吗| www.29qa.com-秋天风景彩铅画| www.0261.wang-时时彩没开奖怎么办| www.558533.com-真实彩虹图片大全| www.481405.com-喝彩中华第二期| www.577089.com-好彩运彩报官方下载| www.09191.cc-炒彩票-| www.84584.cc-狐不归福彩-| www.148.live-彩虹古名-| www.269821.com-彩373app-| www.952694.com-彩票内部中奖| www.126550.com-湖北拼搏在线彩票网| www.41227.com-335彩票下载安装| www.644175.com-黑彩网站关闭| www.50568.com-彩票代理刷反水| www.730596.com-易彩集团能提现吗| www.799178.com-奔驰彩票快八| www.866772.com-海南私彩梦兆查询| www.925275.com-吉首快三秒招人吗| www.986184.com-体彩排列三走势新浪| www.as24.com-福彩基诺玩法新规则| www.862801.com-点我更多精彩| www.935260.com-台湾福星彩最快开奖| www.993648.com-足彩19044期| www.ku2.cc-湖北快三技巧规律| www.169049.com-福彩3d预测-| www.326138.com-网上购彩票安全吗| www.gd90.com-福体彩票开奖公告| www.02rc.com-手机买彩票世界杯| www.80en.com-重庆时时彩后四技巧| 亿彩网www.820585.com| www.772210.com-3d彩票组选多少钱| www.5579.net-乐购彩下载-| www.980936.com-7彩靠谱吗-| www.qp89.cc-中国福利彩体育| www.029071.com-福彩唐龙-| www.698475.com-嘉兴福彩中心电话| www.7467.cm-彩票店好申请吗| www.119567.com-96彩票网官方网站| www.907931.com-七星彩如何算中奖| www.969539.com-酷彩吧网页版| www.dw13.com-亿彩彩票官网网址| www.zc95.com-33彩票网站-| www.vv99.com-彩票导师先带你赢| www.691536.com-麒麟竞彩下载| www.525154.com-时时彩平台最好| www.743833.com-江苏七位数彩票| www.815022.com-彩票技巧的书| www.896857.com-中福彩票破解软件| www.611092.com-下载彩38-| www.677163.com-掌上福彩宝典害人| www.1194.cc-香港好彩-| www.027074.com-原版正料特彩| www.911953.com-福利彩票快3技巧| www.976152.com-重庆各区的彩礼| www.2pi.com-鸿彩快三合法吗| www.86cp.com-必发彩票违法吗| www.3511.in-何明推荐今天七乐彩| www.00373.cc-贵烟好彩烟价格表| www.jx1.com-甘肃快三号码遗漏表| www.i23.club-快三彩票倍投技巧| www.60sq.com-网易红彩合法吗| www.2325.cm-山东好彩快3| www.797437.com-98彩票网1站| www.899273.com-3d彩票软件手机版| www.391202.com-彩虹彩店app| www.501156.com-重庆5分彩公正吗| www.804401.com-疯彩娱乐app| www.886635.com-快三有什么技巧吗| www.095101.com-体彩双采图-| www.4ty.com-怎么样才中彩票| www.99oe.com-网上能买彩票| www.4555.xyz-今天福利彩票开奖吗| www.11950.com-u9彩票是违法的吗| www.83883.com-河南结婚彩礼顺口溜| www.go20.com-规定彩礼不能超过| www.y45.club-山东福利彩票网址| www.487.mobi-博雅彩票怎么样| www.376108.com-百乐彩怎么登录的呢| www.387108.com-河南体彩快嬴48l| www.252549.com-中彩网能提现金吗| www.678529.com-我要下载彩99旧版| www.736721.com-福彩全麦必中解太湖| www.792373.com-彩票用手机怎么兑奖| www.860762.com-好彩双爆珠蓝莓| www.906751.com-福彩地方彩种开奖| www.957164.com-福彩3b分析预测| www.993731.com-足彩任选九投注器| www.ak82.com-押大小单双正规彩票| www.27qa.com-免费送38元彩票| www.904.site-彩铅风景作品高清图| www.5290.cc-七星彩机选投注体验| www.02199.com-炫乐彩-| www.039901.com-排三走势图乐彩网| www.127480.com-彩虹世界官网网址| www.6871.loan-好友游戏彩票app| www.160931.com-海口七星彩开心网| www.852292.com-河南商丘的彩礼| www.899396.com-彩83苹果下载| www.949978.com-百宝彩清海快3| www.983365.com-内蒙古快三推荐红号| www.19fe.com-上期福利彩票| www.93pj.com-高频彩客户端| www.959837.com-体彩亿元大奖一览表| 鸿运彩票www.hy5155.com| www.40114.com-掌优彩票官网| www.004757.com-体彩排列3遗漏查询| www.19dz.com-昨天福利彩票开奖| www.bx32.com-彩神通-| www.217810.com-彩福彩票可靠吗| www.2413.vip-甘肃体彩领奖地址|