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.464696.com-北京单场竞彩推荐| www.991568.com-旺彩社区是什么| www.ha86.com-大发彩票下载| www.021733.com-太原彩票店转让信息| www.285859.com-福福利彩票快3江苏| www.607579.com-网上兑彩票-| www.726525.com-香港彩宝典app| www.29756.com-合买中心一鑫鼎彩票| www.2678.pw-彩票6288-| 易彩网www.12455s.com| www.05713.com-万购彩-| www.1086.cm-幸运快三群-| www.065239.com-平台买彩-| www.06mo.com-彩铅调色表格| www.029895.com-大连市体彩领奖地址| www.93608.com-贵州快三移漏| www.63ei.com-3d真彩早早报| www.e18.cn-高手彩票网123| www.dm1.com-深圳福彩20选1| www.34436.com-鸿运时时彩走势图| www.334200.cc-天津体彩11选五组| www.474112.com-南京市福彩在线网点| www.601822.com-卖福利彩票怎么开店| www.427.in-家彩搜索最新开奖| www.915223.com-盈盈彩网址是多少| www.695.in-竞彩绝招-| www.8462.live-中彩网快三的老板| www.32923.com-江苏体彩大乐透| www.29252.cc-鸿手机购彩-| www.129748.com-中奖彩票双色球图片| www.h19.xyz-旺彩双色球专家预测| www.055921.com-七星彩怎么算中奖图| www.207216.com-一分快彩app| www.01765.com-福彩跨度中彩网| www.906059.com-彩票购买网站| www.726775.com-自动购彩软件| www.812262.com-双色球预测彩吧网| www.897034.com-八八彩票登录| www.088010.com-双赢彩票是真的吗| www.1898.tv-大通彩票攻略| www.39678.com-爱彩彩票安卓版免费| www.017551.com-彩票投资指南报今期| www.738959.com-福彩交流服务平台| www.874484.com-老杜说彩票-| www.35mu.com-七星彩粤海局网图纸| www.57sv.cc-彩票网支持花呗| www.709815.com-七彩争霸-| www.788685.com-怎么看足彩投注量| www.855727.com-福彩3d复试玩法| www.917580.com-彩票代理提成是多少| www.973337.com-彩虹岛接单平台| www.cp2356.com-百盈快三怎么赚钱| www.051113.com-彩知-| www.408873.com-纪梵希彩妆官网| www.110723.com-js518全彩漫画| www.dm40.com-买彩票念十八字咒语| www.28nj.com-易迅彩票可靠吗| www.142967.com-彩虹8网址-| www.405303.com-嘉兴彩票中奖| www.603105.com-彩虹6为什么被禁播| www.620952.com-重庆时时彩靠谱网站| www.699739.com-竞彩太黑了-| www.ni18.cc-极速快彩-| www.2vo.com-网上购买福彩| www.58js.cc-福彩3d黑白玄机图| www.4013.net-澳彩低于香港马会| www.372699.com-欢腾彩票是正规的吗| www.375373.com-福彩三地预测分析| www.518108.com-西安福利彩票事件| www.592123.com-炫彩组词-| www.666690.com-乐彩客安全吗| www.137265.com-七彩冰淇淋做法| www.219646.com-1分快三计划软件| www.533603.com-大乐透彩票怎么填写| www.503522.com-红彩直播问题| www.195983.com-中国江西福利彩票网| www.079082.com-体彩足球竞彩玩法| www.168442.com-快三过五是什么意思| www.51778.cc-福彩三b彩吧家| www.99234.cc-上期福彩3d-| www.5334.biz-福彩三地图谜总会| www.611627.com-下载双彩网-| www.679105.com-博彩对冲套利是什么| www.65582.cc-好彩1app-| www.028.top-45秒彩票漏洞| www.6563.biz-彩票18幸运号码| www.34891.com-90彩票是真的吗| www.85636.cc-附近卖体育彩票站| www.472444.com-彩票软件吧-| www.556908.com-永利皇宫网络博彩| www.624848.com-苏宁彩票啊苏宁旗下| www.697028.com-彩票怎么下载不了| www.765066.com-808彩票网早版权| --岩棉彩钢板规格| www.902345.cc-360购彩-| www.963362.com-星光彩票大发快| 万利www.32123w.com| www.7502.pw-体彩自动销售机| www.445545.com-3d老彩民乐-| www.254236.com-广东福彩快乐十分| www.336121.com-彩票排5开奖结果| www.2411.in-福利彩票官网客服| www.8692.cn-中奖彩民图-| www.033510.com-彩站宝-| www.372608.com-七彩虹颜色排序| www.9090.cx-优秀儿童彩铅画图片| www.004681.com-体彩遗漏-| www.008041.com-七乐彩开奖查询结果| www.183.cx-彩票的真谛-| www.749486.com-有关彩票的上市公司| www.962847.com-七乐彩齐鲁风采| www.fs44.com-辽宁体彩官网| www.c26.me-新派彩-| www.07407.com-500彩软件-| www.972219.com-彩票网站违法吗| www.27981.cc-华阳彩票官网| www.162328.com-竞彩足球比分手机版| www.318959.com-江西省福彩中心电话| www.57512.cc-下载江苏e球彩助手| www.087719.com-彩票快三app| www.536296.com-体育彩票的分类| www.838687.com-竞彩平手盘怎么分析| www.789266.com-足彩任九缩水软件| www.547020.com-彩票平台投注刷流水| www.220796.com-安徽体彩11选五| www.335748.com-北京体彩网首页| www.460333.com-wnba竞彩推荐| www.557994.com-彩铅鹿星空图| www.659200.com-35彩票安装-| www.747491.com-大奖彩票的登录口| www.107751.com-亚洲宝博彩票| www.233019.com-爱彩江苏快3| www.345559.cc-彩友吧双色球| www.445656.com-福彩正版大花虎1| www.585160.com-福利彩票是加盟店吗| www.191586.com-吉林快三直播开奖| www.27fj.com-九江彩票店转让信息| www.5066.net-世界杯足彩停售了| www.53331.cc-时时彩龙虎和规则| www.028112.com-官方网678彩票| www.104758.com-福牛牛彩票官网| www.654994.com-辣椒够力七星彩表| www.543015.com-3d彩票奖号-| www.7219.in-张翰七星彩开奖号码| www.34812.com-福彩3d专栏电脑版| www.86177.com-三彩大衣-| www.094557.com-中国彩吧3d-| www.731372.com-易彩堂网-| www.510606.com-饭圈彩虹屁英文| www.954149.com-日本无嘴好彩| www.rl88.cc-在网上买彩票怎么买| www.622339.com-时时采彩走势图龙虎| www.005663.com-vivox23幻彩| www.617112.com-彩票中大奖照片| www.fn35.com-中国永利快三网| www.j83.com-摩卡彩票注册送18| www.661459.com-高手网齐中论坛彩吧| www.775947.com-时时彩后三最稳玩法| www.872044.com-福利彩票多少钱一张| www.6350.in-今日体彩开机号| www.544997.com-3d彩票中奖票样图| www.54gi.com-大象彩票提现安全| www.278636.com-移动彩票售卖机| www.87zo.com-新版跑狗图4s彩票|