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.965070.com-时时彩微信报奖群| www.120336.com-河南快三经验规律表| www.7839.cn-职业玩彩票的人| www.69385.com-彩博国际-| www.626915.com-姓名幸运号选彩票| www.cx43.com-江苏快三赚钱| www.yu68.com-上海快三开奖规律| www.985808.com-竞彩延期官网首页| www.336224.com-不让提现的彩票| www.515438.com-彩票8亿涉案| www.210496.com-大乐透彩票算号器| www.543087.cc-体彩排三十期试机号| 大赢家彩票平台www.860705.com| www.rb01.com-彩票中奖不捐款挨骂| www.51gq.cc-足彩收米动态图片| www.0282.com-彩票旗舰店-| www.799819.com-福彩领奖规则| www.375204.com-体彩杀号定胆是| www.522222.com-计划五分彩-| www.592953.com-彩虹频道手机破解版| www.678238.com-彩票退机申请书| www.y38.bid-彩票黑平台曝光网址| www.394413.com-福利彩票山3g| www.568047.com-网上买体彩大乐透| www.2306.vip-彩票打票员好学吗| www.9560.vip-海南马彩-| www.162204.com-吉林快三是骗人的吗| www.328559.com-彩票天吉网-| www.488399.com-7乐彩开奖日期| www.729900.com-彩票计划助手| www.804234.com-如何网购体育彩票| www.878128.com-西安福彩3d大奖| www.958613.com-贵阳市彩票中心地址| 大赢家彩票www.399230.com| www.121401.com-彩票托很多来自厦门| www.277493.com-中彩网快3-| www.16577.cc-福彩3d规则及奖金| www.122386.com-足球比分中国足彩网| www.117006.com-彩票11选5app| www.276028.com-彩运8网登录| www.358346.com-深圳口袋彩店二维码| www.476813.com-彩票大家乐-| www.582650.com-四场进球彩开奖情况| www.672814.com-七彩祥云的盖世英雄| www.762222.com-竞彩投注平台| www.935753.com-彩神3300h-| www.992498.com-足彩网结果-| www.gt97.com-网赌快三背后控制| www.d66.online-彩8预知软件| www.310032.com-体彩主任违法乱纪| www.422222.com-彩票诀窍-| www.539471.com-福彩机器能过户吗| www.619602.com-体育足球彩票胜负彩| www.690951.com-福彩大发快3技巧| www.772494.com-重庆时彩客户端| www.836222.com-福彩三d太湖谜语| www.930527.com-马来三分彩专家杀号| www.994638.com-彩票中的倍数怎么算| www.ud1.com-甘肃快三专家推荐号| www.61dp.com-小儿心脏彩超数据| www.1358.cn-彩运来官网登入| www.939911.com-彩神大发下载| www.fu3.com-时时彩开奖记录| www.536297.com-深圳抱团买福利彩票| www.861858.com-山东体彩领奖地址| www.932369.com-爱购彩平台-| 金冠彩票www.49956e.com| www.qh90.cc-广东彩票官网| www.355172.com-河内彩-| www.510334.com-夸人可爱彩虹屁| www.599068.com-彩票选号靠灵感| www.55433.com-九宫图算法彩票胆码| www.079538.com-美国彩票中奖概率| www.152785.com-河北体彩网招聘| www.399967.com-网投港彩48倍平台| www.544868.com-彩票开发告别死工资| www.661173.com-128彩票坑人| www.803721.com-高频彩投资漏洞套利| www.943896.com-京彩集团彩票安全吗| www.fp19.com-福彩玩法规则和玩法| www.672.online-重庆福彩官网电话| www.276659.com-基诺型彩票玩法规则| www.bi45.com-福彩软快三软件| www.sx04.com-中国体彩排列五直播| www.23ga.com-彩票123ios-| www.3468.org-中彩快三计划| www.05781.com-彩票组合软件手机版| www.159466.com-13人彩票分析网| www.996587.com-哈尔滨福利彩票| www.879407.cc-彩乐乐山东十一选五| www.542828.com-绍兴玲珑湾彩票| www.670498.com-今天七星彩预测号码| www.796396.com-博乐彩票骗局| www.875160.com-酷彩吧下载地址| www.947475.com-福彩双彩图-| 全民汇彩票www.52303q.com| www.82oh.com-山西体彩在哪兑奖| www.2611.in-大发快三有没有破解| www.tv6.cc-彩票神器手机| www.219922.com-北京快三交流群| www.449223.com-博彩代理提成| www.79787.com-福彩代理是什么意思| www.064633.com-最稳定的彩票平台| www.175649.com-快三破解器手机版| www.58779.cc-下载体育彩票开奖| www.331553.com-今日彩票预测号码| www.607531.com-南昌福利彩票店| www.781969.com-南洋乐和彩网首页| www.906310.com-彩票10-| 凤彩网www.fc78.com| www.631022.com-好彩柠檬爆1871| www.485100.cc-乐赢彩票网址登录网| www.368422.com-彩铅海边夕阳风景画| www.119413.com-中国全民快三| www.279688.com-齐鲁彩票中心| www.135609.com-2018彩票app| www.700199.com-徐柯福彩3d预测| www.300795.com-鸿胜彩票-| www.su46.com-下载福彩3d-| www.14jd.com-怎么算3d彩票和值| www.433122.com-齐鲁风采福彩3d| www.568460.com-彩票实体店铺二维码| www.662675.com-时时采彩人工计划| www.792705.com-十分钟快三玩法技巧| www.896576.com-博彩套利团队| www.c24.cc-彩之网彩票交流社区| www.45om.com-体育彩票6加一奖池| www.95960.cc-福彩考试怎么通过| www.143847.com-彩票网对刷被风控| www.98qy.com-福利彩票处长| www.94wg.com-全讯彩金白菜| www.871694.com-博牛彩票可靠吗| www.092272.com-福彩3d讲师视频| www.021464.com-7k彩票8-| www.1688.com-注册开户送38彩金| www.25699.cc-彩乐乐杀号定胆| www.011636.com-彩票可以网上买吗| www.110712.com-今天开七星彩| www.191873.com-甘肃快三和值表| www.645666.com-众发彩票是真的吗| www.497404.com-万福彩票手机版| www.586029.com-m5彩票平台跑路了| www.770803.com-竞彩吧app-| www.ac00.com-彩票开奖结果彩宝贝| www.45gl.com-三分彩计划一码| www.8166.cc-澳门博彩32-| www.355714.com-竞彩个人所得税| www.490473.com-七星彩三字定位包法| www.751549.com-手机投注三分彩| www.829019.com-做梦梦到中彩票中奖| www.891057.com-彩票用语高双| www.952350.com-爱乐透彩票手机购彩| www.1279.pw-5分彩下载安装| www.8148.cc-福利彩票双色球三d| 5号彩www.575hc.com| www.158429.com-体育彩票店北单| www.225890.com-快乐彩12选5直播| www.v46.site-排列三众彩网今天| www.0379.xyz-李承红休闲快三教学| www.780398.com-上海彩票选4的玩法| www.375311.com-福彩福利直播间| www.173183.com-福彩5d直选开奖号| www.482851.com-五位数体彩开奖结果| www.yy04.com-彩票神赞计划|