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.ie61.com-微信委托买彩票| www.010969.com-昨晚福彩开奖号| www.150201.com-大彩彩票下载| www.640780.com-新浪彩票竞技网| www.801593.com-福利彩票终端机东莞| www.895310.com-搜狐彩票是合法的吗| www.997587.com-体彩快开-| www.jd29.com-彩票站有北京快三么| www.131084.com-息县彩礼-| www.495298.com-博彩狙击公司| www.631371.com-七彩阳光慢动作视频| www.771080.com-安徽快三每天多少期| www.874984.com-时时分分彩骗人吗| www.1ld.com-9万彩票贴吧| www.351169.com-体彩输了-| www.020994.com-体彩排三百位走势图| www.010506.com-熊猫彩票可信吗| www.090773.com-2元买彩票-| www.09023.com-足球竞彩让球| www.677633.cc-福彩22选五走图| www.325532.com-五分彩-| www.398832.com-大成彩票多长时间了| www.596022.com-买彩票算-| www.701189.com-胜负彩对阵表| www.636575.com-彩虹之歌儿歌中文| www.200022.com-体彩7星彩中奖规则| www.294023.com-福彩十选五中奖规则| www.370126.com-彩铅画花卉图片简单| www.499628.com-彩票系统之家| www.572348.com-下载必发彩票| www.693913.com-体彩有效期-| www.863110.com-智慧彩票预测有苹果| www.930430.com-体彩飞鱼游戏| www.994326.com-彩票注册邀请码链接| www.bv86.com-广东快三开奖查询| www.507151.com-福彩两元网-| www.723072.com-双色球开机号中彩网| www.799755.cc-彩票白菜吧-| www.874710.com-北京快三还有半顺吗| www.941189.com-阿里彩票怎么回事| www.cp04.com-上海福彩快三走势图| www.8547.loan-福彩游戏厅里有什么| www.086.la-曼谷十分彩骗局| www.3190.cm-福彩往期回顾| www.1762.com-众购彩票官网| www.42295.com-有比k彩好的平台吗| www.136829.com-火箭彩票网址| www.01ds.cc-彩票节假日休息几天| www.127493.com-彩宝贝网免费预测| www.2321.vip-陕西福彩二十选五| www.19825.cc-彩票拉人犯法么| www.47089.com-体彩排列五长条图片| www.314621.com-七彩网彩票官网| www.406116.com-海口彩票网彩版| www.523009.com-黑彩玩法-| www.59tm.com-体彩店还能兼营什么| www.9055.biz-福彩306定投广告| www.53495.com-希腊10分彩开奖| www.ak04.com-全国彩票开奖助手| www.47pf.com-22彩票平台下载| www.2791.me-足彩比分直播新浪网| www.455712.com-小小猫版彩吧图库| www.707335.com-彩票人为控号| www.974275.com-彩票和值大小单双| www.th54.com-乐点大发快三官网| www.595592.com-尼彩手机报价及图片| www.711371.com-足彩分析师兼职| www.79630.com-彩吧图迷第一版总汇| www.906019.com-篮竞彩比分直播| 大赢家彩票平台www.223085.com| www.024374.com-福彩绝杀六码| www.336679.com-福利彩票是真是假| www.880881.com-凤凰网彩票有退水吗| www.296539.com-360彩票开奖查询| www.928358.com-北京福彩网上投注站| www.951479.com-澳客彩票网软件下载| www.ys58.com-长春体彩中心导航| www.66wg.cc-杏耀一分彩票| www.3601.vip-南方双彩网全部版本| www.522274.com-逆袭分分彩计划手机| www.616087.com-百万彩友高手| www.747065.cc-北京时彩时彩开奖| www.807867.com-大优彩票怎么样| www.881395.com-长春市福彩兑奖中心| www.956195.com-博雅彩票正式版| 梦想彩票www.33112c.com| www.706232.com-中国竞彩网首页计算| www.198543.com-湖北体彩网-| www.339468.com-九五彩票首页| www.580954.com-手机版彩票开奖| www.090.cx-博彩类网站源码| www.5348.vip-淘宝有买彩票吗| www.12826.cc-彩漂有什么作用| www.3200.website体育彩票送jeep| www.084488.com-凤凰彩票不出款| www.200023.cc-腾讯时时彩开奖记录| www.284151.com-澳门彩票平台送彩金| www.365423.cc-彩铅人物简笔图| www.qp90.com-传统型彩票的简介| www.8209.loan-3d八卦图彩表| www.745994.com-彩票潮信群组| www.d39.com-彩票推算最准软件| www.390119.com-福彩3d真华布衣| www.368111.com-彩芽的好奇心动漫| www.971214.com-今天福彩奖号| www.848633.com-皇家科技时时彩下载| www.6703.vip-12生肖彩票开奖| www.188282.com-高频彩合买-| www.275973.com-快三作弊辅助器| www.662227.com-今日竞彩比分直播| www.672027.com-彩票店销量急剧下降| www.751543.com-网上信誉搏彩平台| www.806657.com-3d乐彩论坛胆码| www.873745.com-贵州快三走势| www.928220.com-彩票为什么不算赌博| www.373238.com-苏州e球彩技巧出号| www.110059.com-7星彩预测最准专家| www.912985.com-网易彩票大乐透预测| 500万彩票www.583792.com| www.535226.com-体彩有哪些种类玩法| www.644986.com-118彩票网合法吗| www.751068.com-福中彩-| www.849294.com-竟彩比分预测| www.924923.com-凤凰彩票官网| www.975290.com-乐汇彩-| www.cp2668.com-福彩快三口诀表| www.av44.com-福彩排列5开奖结果| www.5923.com-福利快乐彩开奖结果| www.028.website258彩票下载安装| www.4921.vip-彩票票花提示| www.22503.com-玩彩靠谱平台| www.67311.cc-彩票新快了-| www.015844.com-幸运中彩票平台骗局| www.501836.com-乐聚彩票怎么注册| www.980203.com-梦想彩票登录网址| www.1719.cn-试刮30彩票-| www.276332.com-快三骗局怎么举报| www.391608.com-快三倍数怎么算| www.611919.com-乐彩论谈17500| www.690682.com-易米足彩-| www.934759.com-opus平台盈彩网| www.982738.com-新盈彩靠谱吗| www.ga68.com-彩迷网腾讯分分彩| www.zc79.com-陇南福彩中心地址| www.58ct.com-炫彩字体软件下载| www.1307.pw-红彩会登录手机登录| www.350075.com-彩色饺子机-| www.458862.com-足彩胜负14场复式| www.560977.com-中彩网天空彩| www.629505.com-5分彩全天288期| www.698949.com-华夏彩票网站首页| www.781766.com-福彩三的分析| www.910528.com-彩93彩票app| www.973639.com-3d字谜彩吧-| 大赢家彩票平台www.917052.com| www.182382.com-河南福彩快3彩票| www.9468.loan-福龙彩票是正规的么| www.52238.cc-中国电信彩铃官网| www.89954.com-977时时彩-| www.534017.com-七乐彩咋玩-| www.631578.com-在哪玩时时彩| www.733989.com-杭州竞彩快三开奖| www.868228.com-南国彩网-| www.962004.com-大发彩票官方网站|