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.760344.com-好彩快三技巧| www.894099.com-997彩票app-| www.345504.com-京彩生活app| www.613098.com-l福彩一-| www.382573.com-谁想玩彩票-| www.544660.com-福彩3d合值走势图| www.654452.com-幸运五分彩合法么| www.950453.com-竞彩亏盈公式| www.368388.com-落日余晖彩铅画教程| www.808888.com-必慱彩票登录网址| www.885834.com-周杰伦彩虹歌词含义| www.964659.com-竞彩比分直播竞彩| www.cai9700.com彩票走势图入门分析| www.of20.com-网上还能买快三吗| www.183278.com-吉林市快三-| www.268059.com-体彩票开奖31选7| www.038930.com-高频彩票投注方式| www.276832.com-时时彩二星看号经验| www.974956.com-体彩大乐透历史奖金| www.525338.com-中国手机彩票客户端| www.932387.com-快三地区-| www.194847.com-彩票代打群-| www.975472.com-蚂蚁彩票计划| www.cai7779.com福建快三开奖走势图| www.lu31.com-好彩36开奖查询| www.b86.club-三分时时彩结果| www.4650.win-彩票买多少钱合适| www.860833.com-福利彩票一等奖奖金| www.833789.com-大家赢彩票下载安装| www.7348.shop-彩虹六号透视挂| www.4710.com-身无分文买彩票发财| www.26192.cc-彩虹是怎么形成的呢| www.71224.com-体彩nba推荐微博| www.np87.com-体彩异地兑奖| www.28392.cc-机选彩票大奖| www.235214.com-北京快三专家预测网| www.ry3.cc-福彩快三心态| www.20552.com-顺发彩票平台app| www.09144.cc-广东体彩手机投注| www.162200.com-彩彩票乐娱平台| www.114403.com-查奇赢彩票全天计划| www.427951.com-赛马彩票开什么号| 大赢家彩票平台www.702309.com| www.76fc.com-星空彩票ios| www.9151.me-七乐彩定胆机选| www.548937.com-彩播贝贝密码房合集| www.736632.com-上海体育彩票app| www.ep1.com-分分时时彩龙虎| www.766568.cc-买彩票的倍投计划| www.853849.com-6合1彩票-| www.925193.com-彩种名是什么| www.981142.com-八马彩票登入| www.bb36.com-大发快三大小公式| www.91824.com-广东彩王彩图图片| www.6033.cm-昭通彩票中奖者| www.206225.com-湖北快三下载安装| www.556467.com-投注体育彩票软件| www.721655.com-博友彩赚钱靠谱吗| www.915550.com-网易彩票手机客户端| www.06pl.com-海口体彩在哪取| www.353789.com-q彩网址-| www.460070.com-炫彩之剑哪里出| www.095108.com-双彩图3d双彩图| www.201373.com-够力七星彩手机旧版| www.930773.com-体彩七星彩兑奖规则| www.cp2897.com-时时彩骗局模式| www.yq32.com-正规福利彩票网站| www.76pb.com-每天买彩票时间| www.7284.cc-彩虹台网络在线直播| www.025539.com-百事彩票app| www.152669.com-极速快三彩票怎么玩| www.953.in-福彩三d胆码| www.be2.com-新彩app-| www.903093.com-快三高频彩害死人| 大赢家彩票平台www.897296.com| www.559862.com-彩票收藏到哪里卖| www.679907.com-巨龙彩票独家心水图| www.781797.com-福彩2d玩法票样| www.856644.com-七星彩开结果| www.917155.com-88彩票是不是合法| www.974206.com-131彩票-| 天天彩票www.54968f.com| www.38br.com-福彩开奖七乐彩单式| www.22mq.com-体彩造假-| www.32138.com-8k彩票违法吗| www.127014.com-江苏南京快三查询| www.mt18.com-官方彩zgg-| www.zw19.com-玩599时彩的人| www.76xf.com-彩票投注计算| www.73990.com-极速时时彩彩走势图| www.263620.com-五分赛车彩票软件| www.380589.com-七乐彩选号技巧超准| www.473273.com-惠州福彩-| www.554913.com-五分快三吧-| www.611140.com-彩票领导者官网| www.584778.com-彩票助赢贴吧| www.643726.com-618彩票怎么看| www.780921.com-彩虹岛新职业神鞭手| www.829009.com-87平台接单彩票| www.874188.com-网易彩票怎么提现| www.913092.com-我附近的彩票站点| www.953462.com-牛牛彩票网官网| www.982311.com-体彩中奖上哪领奖| 众乐彩票www.389144.com| www.811556.com-优的足球彩票| www.045673.com-彩83在哪下载| www.82ci.com-时时彩倍投什么意思| www.12273.com-短信投彩票-| www.587438.com-贵宾室彩票网址| www.71776.cc-3d彩涂第一版| 梦想彩票站www.43131o.com| www.98xr.com-江苏福彩快三软件| www.9599.date-色彩调和-| www.000765.com-千万福彩-| www.235684.com-8熊猫彩票-| www.705033.com-做彩票网站赚钱吗| www.828382.com-龙之彩注册-| www.fv40.com-福彩于海案结局| www.04178.cc-微信彩友团出票| www.004369.com-彩票延迟开奖| www.678383.com-乐彩网论坛三d杀号| www.503379.com-奥鸿集团重庆时时彩| www.613863.com-中国福彩利彩票开奖| www.698400.com-彩票倍投的风险| www.811363.com-彩蛋视频-| www.900478.com-彩票3d计算软件| www.972243.com-福彩三滴开奖号码| 大赢家彩票网www.339215.com| www.965937.com-彩票店开业宣传语| www.lb1.com-安徽快三免费计划网| www.m05.net-乐彩大发快3| www.69bp.cc-聚彩手机网址| www.8720.vip-字谜图迷新彩吧| www.47496.com-好彩香烟1871红| www.103358.com-足球体育彩票怎么买| www.826528.com-有玩933彩票的吗| www.cp651.com-秒速快三彩票| www.787525.com-排列三走势图彩经网| www.852058.com-分分彩都是假彩| www.898438.com-竞彩店主自己刷返点| www.950635.com-在手机上能买彩票吗| www.985908.com-快三号码计算秘诀| www.cp9878.com-快三彩票倍投表| www.kf83.com-苹果玩彩app| www.772.live-画彩虹背面图片大全| www.121624.com-百合网快开彩票骗局| www.340766.com-牛彩网一采摘网| www.761548.com-1分快三计划群| www.19923.cc-开一个私人彩票网站| www.080673.com-马来西亚盛兴彩票| www.161623.com-大小单双彩票网| www.656007.com-合伙买彩票中奖纠纷| www.095687.com-体育彩票星彩网| www.1449.net-苹果彩票官网| www.12236.cc-辽宁福彩网投注指令| www.609074.com-万优彩票链接| 大赢家彩票平台www.978167.com| www.tg64.com-湖北快三今日跨度| www.595689.com-福利彩票专家推荐号| www.985778.com-彩票网址大全下载| www.52ok.com-江苏彩礼2018| www.490255.com-爱彩官网下载送彩金| www.618184.com-体彩做的是什么公益| www.710551.com-彩金套利-|