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.819281.com-真正彩票高手是| www.16728.com-经典说彩专家专栏| www.242577.com-168彩票网站下载| www.555535.cc-七星彩有位置排序| www.732181.com-网络兼职快三彩票| www.rn43.com-快三三不同全包| www.65la.com-聚福购彩网-| www.954938.com-福彩奖池-| www.873120.com-贵阳彩票店转让信息| www.cf1.com-快三权威投注| www.zs18.cc-买彩票压大小稳赢| www.47mj.com-竞彩胜平负预测推荐| www.1938.org-吉林快三96微信群| www.836268.com-快彩为什么改时间| www.987520.com-百色福利彩票中心| www.dh38.com-快乐彩票彩种| www.172391.com-江西快三和值走势图| www.588567.com-春节后何时七星彩开| www.167828.com-快三预测号-| www.43182.com-鸿运网快三正规吗| www.822859.com-山东体彩网排三预测| www.594682.com-nba篮彩预测分析| www.9qy.com-姚记彩票会骗人吗| www.125067.com-福利彩票上海快三| www.246825.com-彩神彩票-| www.325058.com-彩票吧高手网| www.433320.com-彩虹堂官方下载| 大赢家彩票网www.178763.com| www.650365.com-体智能彩虹伞教案游| www.094505.com-彩票816导师| www.99un.com-乐彩vip怎么下载| www.160297.com-彩娃app安卓| www.268215.com-湖北快三一-| www.279309.com-好易彩-| www.909559.com-乐彩客下载app| www.596948.com-满堂彩彩票官网| www.11026.com-爱美人足彩-| www.218960.com-湖北体彩前三直遗漏| www.635016.com-穆棱市七彩影城电影| www.721716.com-破解app彩票| www.045559.com-安徽福彩站怎么申请| www.183728.com-中国福彩开奖信息| www.223248.com-快三挂机软件| www.b89.xyz-三分时时彩是真的吗| www.317915.com-手机淘宝彩票在哪里| www.92268.cc-湖北十一选五乐彩| www.1143.in-彩蛋画-| www.79217.com-红鹰彩票app| www.010987.com-今天五星彩开奖结果| www.058884.com-彩运快三怎么赚钱| www.024495.com-内蒙古福利彩票3d| www.125242.com-盈盈彩appios| www.335918.com-河北快三遗漏值统计| www.47471.com-9811彩票app| 500彩票www.629683.com| www.ji62.com-安徽快三技-| www.yf80.com-吉林快三派彩网官方| www.078841.com-七星彩从几选到几| www.481229.com-喝彩中华武忠| www.134542.com-官方福利彩票网站| www.05379.com-51彩下载安装| www.325050.com-蓝海娱乐发达彩票| www.512897.com-玩彩网ios下载| www.736234.com-一定牛内蒙古快三| www.381427.com-七星彩数据qq群| www.35631.cc-吉祥彩娱乐平台代理| www.99737.cc-去香港可以买彩票吗| www.082017.com-海南七星彩结果| www.709082.com-博盈彩票网合法吗| www.65288.cc-安装南方双彩网首页| www.70ce.com-中彩票网首页| www.3471.vip-爱彩乐天津11选5| www.407878.com-吉林快三秘诀| www.518924.com-乐米彩票客服电话| www.581379.com-快三黑彩玩法介绍| www.658518.com-如何注册百宝彩| www.013610.com-七星彩这期规律图| www.706027.com-福彩开奖今日号码| www.788212.com-福彩体彩今日开奖| www.055062.com-玩彩票网名-| www.152462.com-5分快三开奖查询| www.35547.com-彩民心水之一| www.588426.com-彩票之家官方邀请码| www.661059.com-天天开的彩票| www.722429.com-444cp彩票-| www.792858.com-彩票兑大奖流程| www.550384.com-长春彩溢预约电话| www.r87.com-快三怎么看豹子| www.788698.com-nba竞彩投注热度| www.639754.com-泰国的彩票传销| www.755199.com-福彩开奖结果山| www.863077.com-泰安体彩店转让| www.951503.com-谁有qq彩票交流群| www.bp13.com-官方合法的彩票软件| www.506831.com-彩票历史记录| www.609099.com-天天彩票停售原因| www.680292.com-什么是彩礼-| www.765917.com-福彩三第走式图| www.4847.vip-山西彩服务合法么| www.a56.club-数字彩的另类打法| www.741762.com-彩票猫腻-| www.870973.com-投彩网c97下载| www.976342.com-彩票168开奖网站| www.lw11.com-南粤好彩三开奖结果| www.jx13.com-吉林福利彩票快三| www.57571.cc-皇冠体彩安全吗| www.490012.com-彩票扫描识别中奖| www.567978.com-做彩票代购合法吗| www.656089.com-福彩三地和值表图片| www.735797.com-彩票分析师考试| www.810578.com-最好的彩票书籍大全| www.887387.com-招彩网-| www.952364.com-极彩-| 彩票坊www.022j.cc| www.356485.com-点外卖送彩票违法吗| www.443476.com-福彩3b字迷主题| www.897740.com-彩票宣传语图片| www.956312.com-玩高频彩成功的人| www.999796.com-福彩排列三五| www.am71.cc-快三助手苹果手机版| www.pb57.com-体育彩票12选5| www.11878.com-口袋彩票封了吗| www.63385.com-胜负彩19054期| www.004971.com-香港彩票开奖记录| www.072686.com-什么时间可以买彩票| www.tt55.com-足彩网上买-| www.238268.com-发彩首页-| www.627277.com-旺彩平台下载| www.85ef.com-彩票人工计划靠谱不| www.45077.com-长春彩溢-| www.026435.com-青海福利彩票19期| www.139364.com-谁有红彩网邀请码| www.699661.com-新浪彩票图走势图| www.2635.wang-时时彩票软件大全| www.9598.site-彩票昵称取什么名字| www.74221.com-香港4s彩票-| www.25077.cc-彩铅排行榜-| www.152678.com-海南七星彩图规| www.264838.com-开大小单双是啥彩票| www.093063.com-彩色混凝土路面价格| www.329269.com-内蒙古福彩开奖结果| www.466317.com-台湾福星彩开奖现场| www.588922.com-江苏福利彩票十五| www.705987.com-608万彩票-| www.822774.com-福彩3d计划app| 中国福利彩票www.34788v.com| www.987640.com-小米彩票官网地址| www.mv13.com-正规的彩票软件制作| www.9lj.com-体育彩票多少个号| www.85jx.com-蓝彩预测-| www.7891.cn-云彩排云送彩票来| www.63335.cc-19039期足彩| www.02600.com-魔方彩票苹果| www.gi01.com-三分快三怎么看单双| www.yp00.com-重庆福彩欢乐生肖| www.86683.cc-体育彩票扫码出票| www.91682.com-福彩3d双色球字迷| www.762241.com-竞彩推荐软件哪个好| www.898000.com-彩票充值假聊| www.964113.com-手机彩票人工计划| www.je21.com-足彩竞彩网计算器| www.00aa.com-优购彩下载地址| www.946988.com-乐选3中奖规则体彩| www.621696.com-彩票平台黑钱|