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.514211.com| www.mn38.com-天天中彩是正规的吗| www.289415.com-四川体彩金七乐| www.471847.com-彩迷神马-| www.696928.com-昨天晚上竞彩比分| www.335208.com-大发快三百家号| www.819650.com-易中奖预测彩票准吗| www.24ki.com-温州市体彩兑奖中心| www.970173.com-燕赵福利彩票首页| www.x69.me-106期福彩阳光图| www.3279.biz-彩票技术培训| www.94232.com-买彩票真的会中奖吗| www.681136.com-香港49彩-| www.016278.com-彩票计划员都在国外| www.216037.com-体彩七星彩中奖条件| www.422121.com-广西体彩大乐透巨奖| www.638626.com-类似111彩票| www.158405.com-北京单场彩和竞彩| www.642059.com-网易彩票加拿大28| www.1pc.com-彩色激光打印机喷墨| www.3793.com-竞彩足彩亚盘欧赔| www.hj18.cc-湖北快三是正规的吗| www.xc1.cc-快乐彩开奖号码| www.165053.com-体育彩票任选九开奖| www.989045.com-彩票中的三军| www.034363.com-哪里可以买篮球彩票| www.374434.com-万彩吧cn8-| www.2865.cn-安徽体彩专管员待遇| www.k21.in-代玩幸运快三靠谱吗| www.47rn.com-彩票中奖会被抢吗| www.65545.com-快三分分彩计划| www.37821.cc-暂停互联网彩票| www.845353.com-蒲城彩票店转让信息| www.375672.com-彩票11选五任三| www.60082.cc-凤凰彩票平台手机版| www.888904.com-易彩堂网页-| www.802906.com-宝彩app-| www.396915.com-彩彻区明彩古今异义| www.502382.com-kk彩票官网-| www.563702.com-今日彩票官方| www.917886.com-彩虹宝宝第二季| www.381294.com-泰安市体彩-| www.180999.com-中彩网正规吗| www.292596.com-彩45彩票app| www.372118.com-500轻聊彩票| www.475075.com-福彩绝杀六码试机号| www.552273.com-大家赢彩票网合法吗| www.625850.com-福彩三d绝密| www.w47.club-百乐彩平台是真是假| www.sk59.com-时时彩二星包胆| www.939748.com-网上平台福彩快三| www.3118.in-宝鸡市体彩中心电话| www.29392.cc-彩票下载苹果版| www.980557.com-免费彩票源码系统| www.sf50.com-黑客为啥不接博彩| www.d93.org-足彩8串1中奖算法| www.97pp.com-拾荒彩票-| www.53857.com-500彩软件下载| www.14jl.com-彩金鲨鱼游戏机价格| 网易彩票www.063wy.com| www.887315.com-芒果彩票是不是骗局| www.978412.com-全部彩票网站788| www.c2.net-湖北快三预测一定牛| www.qy39.com-一分快三破解| www.1xd.com-头奖彩票中奖不给| www.62gq.com-彩票3b开奖号码| www.2383.cm-好彩原创心水资料| www.8264.tv-时时彩大小遗漏数据| www.27793.cc-体彩三个红号算吗| www.856385.com-体彩苏州市电话| www.926273.com-千里马福彩推荐号| www.983850.com-快三线路-| www.dx0.cc-北京快三玩法技巧| www.mb50.com-所有的足球彩票软件| www.d33.me-大通彩票开奖直播| www.650652.com-印彩巴哈粉底液| www.731471.com-福彩三地黑圣手字迷| www.015957.com-彩票黑平台冻结账户| www.ry88.com-256彩票登陆| www.rb01.com-彩票中奖不捐款挨骂| www.835370.com-三d牛彩预测| www.26297.com-印尼28分分彩| www.875417.com-福建彩票双色球规则| www.034993.com-中彩网统计图表| www.822742.com-蓝彩星光-| www.904996.com-刷时时彩流水赚佣金| www.977217.com-濮阳彩礼规定| www.dp40.com-手机上买快三违法吗| www.04uz.com-彩色铅笔画人物简单| www.75fv.com-金山彩票怎么了| www.672609.com-默彩-| www.200069.com-体彩开奖查询彩| www.299084.com-计划快三软件下载| www.441818.com-体彩店招牌-| www.451633.com-幸运时时彩正规吗| www.2118.com-创富彩票网-| www.226939.com-菠萝彩论坛-| www.038996.com-天下彩票藏宝阁| www.979958.com-彩票吃票行为| www.15ll.com-山东福彩领奖地址| www.984234.com-彩店宝彩票靠谱吗| www.hz95.com-快三单双大小买法| www.n98.biz-彩彩票开奖查询l| www.559747.com-彩宝网诈骗-| www.654965.com-雷州七星彩南国论坛| www.771624.com-娱乐彩票软件下载| www.840234.com-福彩对号查询| www.916412.com-乐迎彩票王下载| www.10259.com-50o万彩票网官网| www.719.xyz-彩票坐庄是什么意思| www.911715.com-爱彩乐网站可靠吗| www.829630.com-a25彩票-| www.888214.com-彩78下载-| www.954791.com-彩票今天开什么| www.995465.com-足彩冷热表-| www.ek6.com-快三杀一码-| www.y66.top-易经选福彩-| www.294880.com-网上彩票正规平台| www.971276.com-彩票投注有啥规律吗| www.cp398.cc-快三最大的漏洞| www.42qp.cc-福彩杀码最准确| www.939629.cc-福彩门户网址开奖| www.az5.com-500彩票app-| www.81044.com-党员能买彩票吗| www.6462.com-中国福彩一定牛| www.38030.com-e彩堂合法吗| www.018579.com-3b福彩乐彩论坛| www.119768.com-福利彩票打票机教程| www.93269.cc-竞彩让平负-| www.186896.com-吉林快三害人不浅| www.335502.com-买彩网下载-| www.456140.com-彩虹六号探员小技巧| www.531259.com-时时彩违法吗| www.633497.com-七彩直播app下载| www.8941.cc-什么叫地下彩票| www.375100.com-彩经网专家杀号| www.501518.com-网昜彩票-| www.583380.com-收缩中彩网-| www.669627.com-单彩钢板多少钱一米| www.766655.com-东莞彩乐糖果厂| www.886886.cc-各彩种长龙提醒| www.967670.com-qq福彩计划群| www.ag1.com-福彩3d贴吧百度| www.318856.com-易彩现在多少人玩过| www.sx25.com-app福彩网-| www.2288.biz-做彩票的领先团队| www.637547.com-体彩晚秋字谜汇总| www.551523.com-帮朋友买彩票中奖了| www.610789.com-西安彩钢板厂家电话| www.663490.com-乐彩彩票平台代理| www.nc55.com-网易快三app| www.r37.org-高频彩票真的害死人| www.826018.com-彩宝贝3d杀号| www.956055.com-湖北快三遗屚| www.cai8077.com彩票快3玩法| www.50022.cc-神彩非飞凡专家专栏| www.017673.com-易彩国际app| www.op08.com-江苏快三近50期| www.539153.com-彩票店转让后停机| www.702210.com-七星彩中两个数| 13e彩票www.257760.com| www.57kx.com-123彩票全国开奖| www.814356.com-东升娱乐彩票骗局| www.307244.com-派彩网每日推荐|