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.654182.com-中国福利彩票第一位| www.779039.com-三d试机号彩吧| www.875892.com-彩票怎样看走势图| www.971947.com-湖北万彩票网| 幸运彩票www.955708.com| www.nl56.com-胜负彩500足彩| www.x39.cc-时时彩走势图下载| www.738036.com-下载5百万彩票| www.877422.com-百胜彩票黑平台吗| www.168495.com-湖北快三走势图表| www.326958.com-古建彩绘图片大全| www.421449.com-购买双色球彩票下载| www.672712.com-三d过滤器福彩宿水| www.772801.com-彩票预测专家大乐透| www.997760.com-福彩印刷有限公司| www.12460.com-篮球彩票单关| www.6961.cc-湖北休彩11选5| www.253860.com-彩678app下载| www.344708.com-好玩手游彩票| www.435465.com-天美彩票是骗局吗| www.528226.com-时时彩看号手机软件| www.661630.com-如何竞猜足彩中奖| www.734611.com-福利彩票时时开快三| www.805837.com-上海基诺福利彩票| www.908968.com-玩彩票平台-| www.970612.com-凤凰彩票计划软件| 盈彩www.890703.com| www.ke68.com-体彩走势-| www.i11.org-福利彩票图-| www.265234.com-江苏福彩快三遗漏号| www.77793.com-天天体彩直播开奖| www.061641.com-彩客网提现-| www.182147.com-湖北福利彩票快3| www.6655.org-老实时彩360| 福彩网www.5522t.cc| www.ji68.com-吉林快三简介| www.h98.net-中国彩票开奖33期| www.54rp.com-第九彩票是什么意思| www.8192.cn-八炫彩-| www.51438.com-鸿运彩票网页版| www.xb61.com-微彩网app-| www.952056.com-彩神8安全吗| www.5912.net-快三刷分器-| www.609015.com-分分彩后二组选复式| www.771276.com-时时彩官方开奖查询| www.874107.com-什么叫基诺彩票| www.965796.com-江苏快三兑奖范围| www.au58.com-彩票坊app下载| www.zg41.com-彩票占卜幸运号| www.75cr.com-足彩冷热指数| www.4867.cn-e球彩开奖历史记录| www.761646.com-玩快三输死了怎么办| www.769889.com-下载好彩0567| www.362852.com-今天开七星彩吗| www.51110.cc-百盈快三在线计划| www.073728.com-足球彩票预测大师| www.537038.com-关于彩的昵称| www.9fm.com-新浪彩票安卓版下载| www.257422.com-vip彩-| www.xd39.com-中彩在线提现快吗| www.327291.com-大发快三砍龙技巧| www.67601.com-乐彩网是赌博吗| www.414162.com-精彩是什么-| www.456328.com-彩票平台领取彩金| www.48626.com-一赔一彩票平台| www.011402.com-昨天福彩的开奖号码| www.9988.love-多彩投-| www.998118.com-体彩福彩-| www.oj75.com-乐彩小狂人-| www.78eo.com-玩足彩输了两万| www.5566.la-马来分分彩计划| www.985599.com-竞彩足球交易量| www.954887.com-竞彩足球官方网站| www.rj05.com-大发快三没人举报吗| www.304.tv-潘攀彩票-| www.903848.com-彩票竞猜没金豆| www.034979.com-坤彩-| www.331903.com-买彩票需要什么手续| www.500859.com-彩照是什么-| www.569656.com-彩吧图3d谜-| www.650415.com-简单日落水彩画| www.bb68.cc-内蒙古快三推荐号| www.779715.com-福彩3d杀号公式| www.901298.com-玩彩老头排列三预测| www.976608.com-焦作彩礼多少| www.7378.in-彩八仙官网-| www.69962.cc-盛世彩票手机| www.033983.com-七星彩哪一年创办的| www.9mf.com-七星彩单式票复式| www.377671.com-红彩彩票网站| www.22797.cc-最新版本6亿彩票| www.372413.com-用彩色造句怎么造| www.805844.com-体彩刮刮乐有哪几种| www.892073.com-时彩开奖结果| www.966675.com-吉林快三计划群| www.uy31.com-时时彩倍投注方法| www.23ic.com-ok彩-| www.908558.com-七星彩随机选号投注| www.519888.com-优信彩票可不可靠| www.638617.com-竞彩销售点-| www.718698.com-彩虹一共几种颜色| www.788983.com-足彩竞彩必发指数| www.846992.com-中国体育彩票贵州站| 吉利彩票www.66376q.com| www.110616.com-七星彩最新中奖故事| www.283428.com-七星彩有几种玩法| www.373723.com-足球竞彩最新对阵| www.469383.com-万彩办公大师ios| www.554836.com-彩票冷热趋势分析| www.633300.com-网上如何注册买竞彩| www.ir74.com-福彩手机购彩平台| www.q76.cn-长春双阳黑彩| www.106205.com-外国用什么彩票软件| www.cai6733.com上海时时乐彩| www.637709.com-彩虹6号sbr-| www.205789.com-大发快三走势怎么看| www.556729.com-深圳快乐彩5分开奖| www.631270.com-彩票平台制作的优质| www.251051.com-天天中彩官方app| www.360918.com-开彩网开奖号码| www.578815.com-体彩店效果图| www.445033.com-陕西福彩怎么申请| www.567333.cc-昆山福彩-| www.665038.com-彩霸王彩图纸| www.sn9.com-广西快三规律破解| www.02be.com-长春市彩票中心| www.77bb.cc-体彩顶呱刮玩法| www.1680.love-爱投彩票手机客户端| www.836487.com-苏州彩票巨奖骗局| www.915179.com-彩票又可以网购了| www.967480.com-彩票计划导师微信| 网购彩票www.cp7777b.com| www.mj6.cc-一快快三计划软件| www.574883.com-彩票大乐透推算方法| www.259883.com-福利彩票怎么选号码| www.0640.vip-计算彩票神人| www.965292.com-怎么想最容易中彩票| www.zf8.com-上海福利彩票时时乐| www.xc34.com-河北福彩排列七玩法| www.0228.me-澳洲时时彩技巧| www.13421.com-网络彩票诈骗| www.22903.com-王者彩票一分快3| www.63034.com-彩票开奖历史20| www.022347.com-重庆时时采彩| www.110514.com-七星彩二字现怎么打| www.11800.com-泰国彩票玩法| www.52616.com-好彩烟怎么鉴定真假| www.686408.com-中国重庆时时彩时间| www.373122.com-吉林快三改时间了| www.513183.com-22e彩票-| www.7588.net-奖虫七星彩打印机| www.672618.com-3d走势彩宝贝| www.3721.bid-淘之家彩票真的吗| www.2831.wang-好彩投彩票最新| www.7348.tv-买彩票是骗人的吗| www.410076.com-中体彩运营中心| www.700813.com-e彩堂-| www.796346.com-尊彩是-| www.879369.com-福彩3d脑筋急转弯| www.938957.com-竞彩单场足球彩票| www.984742.com-手机模拟彩票摇奖机| www.oc82.com-有谁知道福彩网站投| www.026578.com-苹果博彩app| www.099896.com-地下彩票-|