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.449988.com-快乐中彩票靠谱吗| www.365821.cc-彩铅线描画我的家| www.111459.com-彩票团队计划大全| www.205635.com-十分彩是正规的吗| www.294019.com-大发时时彩中奖规律| www.650538.com-南京哪里有卖彩票的| www.216353.com-各种彩票的玩法| www.989516.com-彩票香港盘官网| www.022594.com-足彩14场竞猜| www.070.site-云彩软件-| www.2939.me-体彩福彩门头招牌| www.033505.com-易彩娱乐是黑平台吗| www.565505.com-九州体育博彩| www.115477.com-彩铅花卉教程图解| www.1098.pw-竞彩足球心得| www.13768.cc-福彩体彩走势大全| www.j22.com-青海福彩网开奖结果| www.73sn.com-彩票黄历预测今天| www.1015.top-彩票20分钟-| www.096322.com-郭果大乐透众彩网| www.47ob.com-本期体彩双色球开奖| www.8zb.cc-乐彩排三字迷| www.333567.cc-送彩票促销违法吗| 网易彩票www.9356h.com| 凤凰彩票www.5091l.com| www.252186.com-中彩在线邮件| www.782338.com-乐彩彩票是正规的吗| www.fc47.com-玩彩赚钱技巧| www.495529.com-彩漂液伤衣服吗| www.585067.com-松北好彩酒店电话| www.538867.com-快速时时彩开奖| www.02335.com-该不该戒掉彩票| www.1960.vip-体彩店申请程序| www.730596.com-易彩集团能提现吗| www.821023.com-彩色水泥价格| www.505741.com-玩黑彩快三-| www.422568.com-卖福利彩票书的| www.555043.com-彩票怎么中上亿| www.0068.com-中国福彩时时彩奖金| www.9278.net-乐彩客是正规的么| www.9911.vip-竞彩足球胜负评| www.59373.com-彩铅画人物图片大全| www.254316.com-分分快三开奖在哪开| www.358344.com-新宝彩票合法的吗| www.485753.com-篮球彩票大小分盘路| www.570516.com-七彩云南翡翠店| www.666345.cc-众彩是国家正规的吗| www.800074.com-现在卓易彩票用不了| www.920222.com-彩票模拟器投注器| 天天赢彩票www.73736c.com| www.438506.com-乐亿彩票乐逸报| www.024594.com-广东体彩网官方网站| www.097976.com-万彩万彩吧-| www.597801.com-体彩扑克开奖查| www.958390.com-永信218彩票| 彩客网www.535051.com| www.682240.com-微信登的彩票app| www.811663.com-太子彩票官网| www.918005.com-私彩数据会上官方| www.982231.com-360彩票走势图| www.bd61.com-安徽福彩快三遗留| www.zk61.com-038彩票下载| www.51ym.com-极彩在线登录| www.863297.com-双色球走势图中彩网| www.942507.com-深圳体彩兑奖中心| 500万彩票www.39500hh.com| www.52195.cc-今天足彩十四场比分| www.08630.com-福彩3d模拟选号器| www.812652.com-西赵口彩吧一早报1| www.6733.com-彩票主任领奖| www.650369.com-彩虹伞歌谣-| www.bh4.com-好彩3最新开奖号码| www.513787.com-玩彩票3分钟| www.293890.com-江苏快三前天开奖| www.373025.com-亿购彩下载-| www.7et.com-中国体彩在哪里领奖| www.65xi.com-现在买彩票的人多吗| www.1702.org-体彩大乐透93| www.763.mobi-时时彩有漏洞嘛| www.876675.com-幸运彩票网提现被黑| www.558902.com-彩票微信兑奖| www.702.xyz-江西时时彩专业版| www.32192.cc-易彩集团靠谱么| www.jj43.com-内蒙福利彩票快3| www.e44.com-123体彩-| www.lq44.com-中彩网是真的吗| www.p58.top-快三8期容易开| www.001225.com-神马福利彩票| www.094321.com-3彩彩票-| www.160316.com-好运彩手机版下载| www.0907.xyz-私彩导航入口| www.16361.cc-中国福彩几点开奖| www.857849.com-深圳福利彩票兑奖| www.977306.com-南阳市区彩礼| www.vt1.com-发达彩票的真实性| www.47658.com-体彩7星彩-| www.w50.top-西安天彩粮可靠吗| www.56ag.com-2019意大利彩票| www.804888.com-七彩旗-| www.879671.com-l3d彩票开奖号码| www.951075.com-新华网彩票频道| www.998862.com-彩乐汇官方下载| www.al65.com-河北快三手机版下载| www.pa36.com-北京快三当日遗漏号| www.393563.com-昨日福彩3d-| www.20ng.com-彩票头奖在哪领| www.224496.com-买彩票幽默的一句话| www.306578.com-澳发手机彩票网| www.372395.com-天天中彩票8月停售| www.507972.com-彩宝批发-| www.575569.com-时时彩万位杀号| www.685856.com-欢迎使用彩票专业版| www.37685.cc-1216购彩-| www.410989.com-中国足球竟彩| www.563754.com-中彩网要邀请人吗| www.671462.com-彩九平台下载| www.780676.com-黑客破解彩-| www.883788.com-彩界九歌独胆| www.e22.biz-彩票双色球机选号码| www.57706.com-中彩计划盈利| www.026794.com-用01彩票做兼职| www.145298.com-福彩站怎么样| www.233207.com-七星彩手机机选彩票| www.521251.com-福彩三d千禧开机号| www.35075.com-金彩网快三技巧| www.040324.com-下载十分彩-| www.553856.com-胡家乐福彩助学| www.868228.com-南国彩网-| www.81778.cc-彩票赌大小技巧| www.044551.com-湖北快三难度| www.110669.com-上期七星彩头奖号码| www.05ug.com-新手彩铅用什么牌子| 吉利彩票www.80065j.com| www.540778.com-福彩中奖事件| www.610019.com-七星彩开奖直播今天| www.948679.com-快三吉林长春| www.cp9192.com-彩中彩app-| www.137710.com-七星彩电脑版| www.234738.com-安微快三跨度总表| www.41di.com-体彩大乐透春节休市| www.398384.com-七星彩什么时候停售| www.546564.com-彩票站点申请| www.75yi.com-台湾福星彩开奖网站| www.382108.com-买彩票借钱的群| www.lu27.com-大中华彩票合法吗| www.739468.com-竞彩跟单-| www.508314.com-14亿彩票下载| www.590568.com-七星彩今日开奖图片| www.656197.com-2013年七星彩| www.133718.com-极速快三彩票系统| www.202377.com-遵义体彩-| www.362084.com-澳门十分彩玩法| www.480374.cc-足彩必发指数新浪网| www.615044.com-六合开彩现场168| www.695995.com-今日竞彩结果| www.778934.com-走势幸运之门彩票网| www.852767.com-比利时分分彩走势图| www.919086.com-今日彩神通关注号码| www.974387.com-大豪门彩票网址| www.es9.cc-快三复式万能五码| www.113405.com-各种釉彩大瓷瓶| www.926302.com-七乐彩除八数走势图| www.601630.com-想挣点零花钱买彩票| www.670232.com-凤彩网福彩3d独胆|