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.984325.com-彩八不出款-| www.72870.com-甘肃快三小贴士| www.30ec.com-彩虹网站-| www.362036.com-连中彩票平台登录| www.456774.com-六玄网香港马彩解图| www.0240.xyz-欢乐赛车彩票官网| www.981629.com-买彩票下载什么软件| www.bz04.com-体彩大乐开奖查询| www.vu11.com-惠民彩-| www.880271.com-彩票三彩网安全吗| www.199543.com-厦门福彩快3| www.327828.com-一分快3彩票和值表| www.476924.com-广西新粤彩报纸| www.587949.com-福彩3d三星缩水| www.307303.com-淘宝网如何买彩票| www.540260.com-玩彩网触屏版首页| www.681606.com-豪彩603驱动下载| www.831217.com-3月足彩-| www.939196.com-金利彩票是否合法| 中彩网www.61233t.com| www.ia11.com-333彩票平台骗局| www.u19.cc-深圳福彩中奖| www.402088.com-分分快三和值预测| www.525888.com-彩票定非法经营罪| www.624215.com-福彩3d速查表大图| www.707433.com-彩票资讯网开奖记录| www.791034.com-三分彩出号规律| www.874402.com-福彩精彩十分查询| www.953517.com-中国竞彩奖金计算器| 博乐彩票www.35918p.com| www.287756.com-可以合买的彩票软件| www.419429.com-彩票开奖直播官网| www.546011.com-体彩年轻人| www.738944.com-天津所有彩票大奖| www.974327.com-北京福彩双色球规则| www.qt12.com-一分快三必中技巧| www.997000.com-88爱彩安全吗| www.337978.com-海南福彩快2记录| www.512785.com-王者彩吧平台| www.606673.com-足彩为啥都停售| www.20gy.com-19035足彩-| www.380599.com-彩票同期开出号| www.559732.com-彩宝的宣传语| www.703700.cc-998彩票软件| www.790168.com-彩名堂计划官网| www.869332.com-够力七星彩老版本| www.392028.com-万彩吧网站-| www.956253.com-倍投彩票能稳赢吗| www.948081.com-众彩网平台-| www.949932.com-豪客彩票下载| www.vx95.com-一定牛河北快三遗漏| www.761243.com-凤凰彩票官网首页| www.xn05.com-一分快三平台大全| www.629999.com-海南七星彩大奖梦册| www.798376.com-如何看彩票是否中奖| www.962648.com-银河彩票贴吧| www.07uz.com-为什么刚力彩芽招黑| www.968006.com-胜负彩超级必发指数| www.664385.com-新浪爱彩暂停销售| www.777979.com-东西湖彩箱厂| www.82yb.com-澳门三乐彩开奖公告| www.237416.com-内蒙快三共多少注号| www.mt5.com-7彩国际-| www.97ca.com-富游彩票app下载| www.38932.cc-95彩票邀请码| www.976293.com-河南省体育彩票中心| www.ux86.com-北京市快三-| www.075756.com-彩32vip-| www.316000.cc-足彩开挂-| www.17za.com-吉林快三图表跨度| www.07606.com-中彩那天课文生字| www.905323.com-足彩竞彩投注| www.995463.com-彩票v8娱乐官网| www.fn75.com-幸运快三网评论| www.b17.cc-福彩3d几点停售| www.176180.com-全天快三计划网址| www.285971.com-乐炫彩票网址| 彩世界www.99788k.com| www.754047.com-分分彩挂机论坛| www.246.bid-网上买彩票有假吗| www.450202.com-爱米彩票-| www.678358.com-中国彩吧论坛官网| www.495701.com-3d通博彩免费版| www.8336.net-凤凰平台快三玩法| www.rg33.com-七星彩全复式| www.719218.com-彩吧3d迷图第三版| www.306896.com-河北快三推荐和值| www.399855.com-南国彩票4十1论坛| www.70271.com-玩运彩朋友圈| www.028368.com-百度彩票大乐透杀号| www.608018.com-福彩申请流程| www.166961.com-易彩快3-| www.170056.com-甘肃快三预测一定牛| www.737665.com-福彩连环夺宝害死人| www.72090.com-2018世界杯体彩| www.72759.com-国外足彩数据网站| www.9585.biz-杭州竞彩店查询| www.12ql.com-买彩票的平台| www.359448.com-今日的彩票开奖号码| www.o55.online-赠予彩票-| www.936882.com-极速3d彩票怎么玩| 大赢家彩票网www.178795.com| www.646179.com-香港新星彩-| www.8639.net-彩视怎么收费| www.770032.com-彩票提款被拒绝| www.19587.com-发彩网大小单双| www.ac5.com-河北快三226遗漏| www.42338.com-彩票账户余额| www.019982.com-在线购彩票-| www.365909.cc-3d彩组六必中| www.635103.com-七彩影城凯德店影讯| www.11647.com-泰国彩票要怎么查询| www.155346.com-中国足彩网第一彩| www.8008.in-现在那个彩票网能玩| www.37673.cc-竞彩网500论坛| www.91904.com-中彩那天课文的答案| www.070757.com-优彩彩票-| www.829.cm-直播刮彩票违法吗| www.7266.loan-彩虹5多少钱一架| www.33152.com-福建体彩官方网下载| www.761135.com-竞彩3串3什么意思| www.841826.com-体育彩票的推广| www.907979.com-七星彩中了五个号没| www.964191.com-彩乐乐彩票网官网| 大赢家彩票平台www.701250.com| www.070296.com-湖北快三人工计划群| www.082511.com-118彩票怎么样| www.1601.in-河南休彩彩481| www.8457.vip-福彩三的试机号查询| www.go93.com-河南限制彩礼| www.738888.cc-江苏快三诚信群| www.803519.com-浙江体彩6十l| www.870502.com-彩票投资指南| www.956748.com-彩票缩水好用的软件| www.997567.com-k彩线路-| www.bj76.com-三分快三彩票合法吗| www.96933.cc-彩票是托-| www.3266.me-江苏福彩3d快三| www.39728.com-买彩票输身亡| www.91445.com-好彩蓝莓味爆珠| www.182223.com-安徽福利彩票快3| www.288269.com-江苏快三开的啥| www.790102.com-双色球青海彩民| www.867852.com-特区彩票论坛论坛| www.952624.com-南粤风采好彩1查询| www.991579.com-百宝彩电视走势图| www.cp3366.com-河南福彩22选5| www.18726.com-亚洲彩票网涉嫌诈骗| www.55514.cc-8k彩票有限公司| www.1359.vip-福利彩票是不是真的| www.312778.com-网易彩票客户端| www.55370.com-时时彩最佳打法| www.033566.com-彩店宝官方app| www.112095.com-彩票平台下载合集| www.169937.com-江江苏快三走势图| www.226998.com-湖南长沙快三| www.280950.com-竞彩足球310推荐| www.350961.com-彩票好做吗-| www.11qy.com-彩票365两个版本| www.198459.com-彩神t-| www.1683.vip-t乐彩走势图| www.97287.com-彩票助赢软件怎么样| www.we84.com-中国手机福利彩票网| www.04sx.com-幸运彩票6-|