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.502975.com-jolly鸿彩灯光| www.035400.com-至尊争霸app彩票| www.454583.com-乐彩检疫怎么样| www.876623.cc-中国彩票真假| 凤凰彩票www.3479g.com| www.363906.com-vr彩票漏洞赚钱| www.493713.com-今日彩票摇奖| www.581296.com-民政部副部长彩票| www.660601.com-彩6彩票苹果下载| www.739237.com-网易彩票杀号专家| www.825888.cc-138期快三-| www.900032.cc-手机天天彩票软件| www.977489.com-加盟彩妆连锁店| www.ag4.cc-宁夏福彩宁夏体彩| www.58725.cc-大众彩票注册| www.180234.cc-博众快3彩票软件| 8号彩票www.60108p.com| www.234663.com-义乌福利彩票中心| www.380101.cc-奥客彩票手机网| www.59813.com-儿童彩虹画图片| www.158467.com-彩票北单怎么买| www.434512.com-买彩票怎么选数字| www.616242.com-中彩网预测号码| www.60260.com-长期玩黑彩能赢钱吗| www.036502.com-查七乐彩-| www.456509.com-彩票三d图纸今天| www.558964.com-彩虹的约定寓意| www.428705.com-巨彩网站合法吗| www.kr15.com-3d最新预测凤彩网| www.09405.com-广州福彩网点查询| www.025782.com-喜乐福彩-| www.357927.com-重庆十十彩软件| www.313020.com-彩票半顺是什么意思| www.688064.com-好彩频道直播| www.98819.cc-彩票代销证-| www.156156.cc-快三中几位算中奖| www.567267.com-白沟旋风彩虹机| www.650210.com-彩票数字预测规律表| www.789637.com-七星彩最近十期今天| www.877762.com-中国福刺彩票| www.959947.com-官方彩票计划网页| www.cp3966.com-快三在线人工计划网| www.9697.com-500彩合法吗| www.14ej.com-南海彩票论坛七星彩| www.0340.cm-博友彩快3-| www.8118.me-江苏快三开挂软件| www.43806.com-体彩快乐10分钟| www.027082.com-博彩套利-| www.140226.com-时时彩赛车计划网站| www.525957.com-超信做彩票帮投单| www.318104.com-澳门彩票平台那个好| www.9976.org-下载彩吧图库第一版| www.043518.com-七星彩开奖结直播| www.0283.cn-餐厅送彩票-| www.528685.com-体彩6十丨开奖号码| www.948065.com-福彩体彩能一起开吗| www.cp2869.com-福彩快3规则| www.vu76.com-彩票k线图怎么看| www.32pd.com-体育彩票春节安排| www.571455.com-博发彩票手机版下载| www.132064.com-不予返还彩礼的情形| www.56698.cc-北京快乐时时彩| www.85872.com-我附近的彩票站| www.130447.com-博牛彩票计划| www.299764.com-235彩票平台| www.420122.com-爱乐透买彩票可靠吗| www.535178.com-时时彩黄金分割教程| www.687393.com-甘肃快三qq群| www.160806.com-竟彩258彩票| www.333330.com-彩票gg分分彩| www.433062.com-陕西体彩兑奖地址| www.555799.com-七乐彩今晚预测| www.638356.com-上海体彩申请条件| www.966018.com-快三最佳追号时机| www.335993.com-高频彩吧-| www.110159.com-爱彩乐彩票数据提醒| www.365232.cc-甘肃省快三形态走势| www.579150.com-体彩中奖顺序不限| www.cai9099.com体彩开奖查询| www.mk84.com-网上快三输了几十万| www.312134.com-福正德彩票-| www.930991.com-中彩网快3开奖结果| www.019634.com-福彩端是什么软件| www.639264.com-上海福彩实体店| www.767593.com-福彩牛彩网彩摘网| www.843722.com-美国彩票是国营的吗| www.923227.com-北京彩票双机转让| www.em.cc-内蒙快三遗漏号| www.460435.com-福彩3d九宫图大全| www.334133.com-彩票顺口溜怎么说| www.51796.cc-速彩娱乐官网| www.050301.com-在黑彩打工是犯罪吗| www.787810.com-彩客化学待遇好么| www.98eo.com-彩界元宝独胆| www.611564.com-彩虹六号本子资源| www.711400.com-彩票店过户-| www.52sf.com-竞彩足球单关统计| www.163850.com-忘想买彩票翻身| www.362830.com-雨后的彩虹-| www.530698.com-彩铅画古装人物教程| www.613294.com-中囯电脑体育彩票| www.706608.com-嘉兴体育彩票征招点| www.786732.com-极速彩票技巧| www.877832.com-台湾五分彩开奖查询| www.863991.com-体彩开奖号码是多少| www.940207.com-中国体彩彩票网| www.60192.com-分分彩挂机稳赚| www.597385.com-双色球预测网易彩票| www.208298.com-快彩app免费下载| www.563967.com-极速快三实时计划| www.654794.com-七星彩2023图规| www.741355.com-519彩票-| www.812882.com-尼彩手机倒闭了吗| www.4791.top-彩虹六号过审失败| www.03033.com-澳门彩票官方投注| www.247686.com-湖南福利彩票双色球| www.31077.cc-快三下注平台下载| www.878691.cc-什么平台有江西快三| www.9524.loan-海南抓获私彩头目| www.40118.com-新浪彩票任九| www.418573.com-中博彩票是违法的吗| www.ol1.com-河北快三预测一顶牛| www.qg78.com-好彩烟-| www.652519.com-港股的博彩股是哪些| www.325812.com-彩宝网3d开奖结果| www.279133.com-快三2豹的规律| www.852485.com-北京分分彩是真的吗| www.55yf.com-今天彩民乐树钱图| www.789318.com-万达彩票不可以提现| www.008670.com-体彩第19029期| www.803323.com-福彩群号-| www.cai7896.com幸运快三口诀| www.yp82.com-天津福彩时时彩玩法| www.20qi.com-2月16日体育彩票| www.1009.in-高频快开彩票游戏| www.323467.com-体彩金七乐下载| www.465431.com-快彩网彩票-| www.637508.com-彩虹6号干员真实吗| www.795385.com-彩票怎么领奖流程| www.950334.com-竞彩足球外围app| www.fn3.com-国家叫停重庆时时彩| www.01ub.com-中五百万大奖彩票图| www.39124.com-汇彩国际信誉平台| www.628596.com-什么彩票不作弊| www.707595.com-凤凰时时彩平台网址| www.789337.cc-买竞彩的app| www.861333.cc-彩票资讯电话| www.915111.cc-彩96官方网站| www.959734.com-盈彩网官方下载| www.997378.com-全天极速时时彩计划| www.xd1.cc-七星彩开奖结果查询| www.331764.com-乐彩静态版-| www.53066.cc-重庆时时彩走势| www.ys70.com-延吉福彩中心| www.105888.com-彩彩票-| www.544433.com-红中彩票平台登录| www.696710.com-今日足球竞彩赛程| www.811279.com-中国福彩3d图纸| www.926798.com-达人彩-| www.gp04.com-四川彩礼价目表| www.22fv.com-福彩中心案-| www.20gl.com-彩票19030-| www.820705.com-彩色水泥道路| www.29km.com-体育彩票试机号今天|