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天

知道了
百盈PK10 www.362601.com-彩虹列车音译| www.380579.com-贵族快三-| www.771921.com-汇盛国际时时彩| www.999308.com-福彩詹天佑预测分析| www.4uk.com-福彩真精华布衣| www.1233.red-旭辉研彩在哪下载| www.984725.com-福利彩8平台靠谱吗| www.ql56.com-福彩快三国家支持吗| www.96978.com-竞彩2串1交易排行| www.293617.com-关于快3彩票较件| www.522449.com-新宝6腾讯分分彩| www.252187.com-创富彩票合法吗| www.433535.com-中国体育彩票排列| www.158605.com-七星彩摇一摇选号| www.081907.com-最新双色球维彩视频| www.980696.com-利彩彩票是骗人的吗| www.586463.com-澳门网站领彩金大全| www.676967.com-万彩吧官网-| www.774399.com-七星彩中奖查询计算| www.868363.com-江苏十分钟快三| www.954217.com-709彩票平台安卓| 彩票驿站www.621341.com| www.ya13.com-福彩3d走势连线图| www.40pj.cc-所有彩票开奖网址| www.3332.win-中彩股份北斗传媒| www.848389.com-福彩快三有时间差吗| www.332438.com-网上彩票代理平台| www.511066.com-六色彩虹代表| www.620388.com-一定牛快三北京| www.734739.com-非凡彩票网官方网站| www.922255.com-彩票365购彩| www.mg6.cc-安徽快三是正规的吗| www.uu46.com-上海时时乐彩票查询| www.623277.com-3号彩票骗局| www.740850.com-蓝精灵彩报图| www.840905.com-儿童彩妆怎么画| www.928876.com-局王七星彩奖表| www.981487.com-易彩网主页-| www.015730.com-七星彩安卓手机版| www.qy48.com-体育彩票11选5| www.5718.in-附近福利彩票站位置| www.699057.com-时时彩十期倍投方案| www.237602.com-足彩胜负对阵表| 乐彩www.lczg8.com| www.fl84.com-足彩500比分| www.c95.top-彩视怎么能注册| www.387336.com-老彩民新水论坛| www.534666.com-彩票2元网下载官网| www.611640.com-彩票投注软件哪个好| www.685609.com-彩票中奖模下载| www.759979.com-时时彩单期计划网页| www.853480.com-海南体彩开奖彩票| www.921891.com-温州快乐彩走势图| www.980994.com-旺彩预测大乐透彩票| www.dt43.com-大发快三官方| www.566353.com-搜索聚丰彩票| www.777113.com-锋彩直播tv下载| www.8210.vip-北京彩票管理中心| www.155581.com-红旗彩票有风险吗| www.84qc.com-福州彩票双色球开奖| www.358934.com-七星彩1011| www.451589.com-湖北福彩十分| www.207160.com-湖北官网快三开奖| www.461456.com-网易彩票今天老黄历| www.157269.com-竞彩交易冷热指数| www.985807.com-众彩网千里马预测| www.85el.com-福利彩票转让协议| www.781742.com-老尹说彩大乐透分析| www.40wo.com-七星彩中奖几率高吗| www.772241.com-百分百快乐彩计划网| www.nw.com-中国竞彩网比分直播| www.xk69.com-鑫彩国际彩票怎么样| www.51gq.cc-足彩收米动态图片| www.3796.vip-七星彩2285期| www.77312.com-长沙福利彩票店转让| www.810132.com-鸿运彩票网注册| www.79874.com-123彩库-| www.cp9923.com-南宁快三开奖结果| www.951342.com-体彩第19031期| www.509386.com-彩票频道新浪| www.098117.com-北京福利彩票站转让| www.550343.com-网易彩票网电脑版| www.3275.pw-中彩集团-| www.0434.org-安徽快三号码| www.891968.com-彩宝贝杀号-| www.7472.vip-黑龙江体育彩票电话| www.327389.com-七乐彩中奖概率社区| www.485073.com-时时彩倍投方案| www.594822.com-福利彩票乐彩| www.709628.com-买彩神vi技巧| www.849733.com-竟彩比分直播新浪| www.967343.com-河北时时彩11选五| www.67lv.com-什么是彩色透水砖| www.599165.com-名豪彩票平台正规吗| www.767920.com-广西快乐双彩奇偶| www.887001.com-金凤凰彩票合法吗| www.wp1.cc-彩票屠龙应该怎么做| www.06da.com-福利彩票预测33期| www.103.website河内五分彩走势软件| www.4482.pw-葛林若焕彩晚霜| www.8999.cm-金福彩票网-| www.890950.com-至尊彩为什么没人管| www.979899.cc-广州体彩自助终端机| www.cb36.com-黑彩做庄技巧| www.0812.bid-我要看彩红宝宝| www.158743.com-利盈彩票下线| www.392240.com-福彩3d魔图图片| www.576645.com-购彩v下载安装| www.050998.com-陕西福彩app下载| www.md69.com-支付宝怎么买彩票| www.07xg.com-体彩p5出号走势图| www.170270.com-福彩快三怎么玩不亏| www.972450.com-菠萝彩魔图-| www.fb1.com-青海快三今日开奖号| www.5qa.com-足彩中了要交税吗| www.76et.com-盛世彩票下-| www.1499.in-快三选号助手邀请码| www.604922.com-彩票合买贴吧| www.947696.com-关注多彩贵州网| 七彩www.53900c.com| www.338858.com-彩票托晚上-| www.og78.com-卓易彩票旧版| www.26hm.com-足球彩票图片恒大| www.436.bid-时时彩推波玩法实例| www.3020.top-重庆时彩遗漏历史| www.841813.com-中国福利彩票新彩网| www.934391.com-体彩打票机的教程| www.998768.com-如何开体彩店| www.we54.com-福利彩票店图片| www.038603.com-快彩开奖结果| www.289273.com-038彩票apk-| www.894866.com-老时时彩助手| 6号彩票www.5484d.com| www.506727.com-足彩技巧必胜诀窍| www.576901.com-重庆腾讯彩-| www.352385.com-谁能出彩票被黑的钱| www.610993.com-福彩3b试机号今天| www.14210.com-今日竞彩足球比赛| www.225986.com-浙江快乐彩走势图| www.018927.com-湖北省3d福利彩票| www.085660.com-彩票长龙助手下载| www.541428.com-平台彩票代理| www.731080.com-上海中彩网-| www.484369.com-三分快三风彩| www.280898.com-福彩快3出号规律表| www.12ty.com-柬埔寨彩票种类| www.04nr.com-彩铅脸部阴影怎么画| www.183.cx-彩票的真谛-| www.057685.com-甘肃快三电视版| www.115184.com-彩宝彩票网合买| www.166956.com-福彩快三是什么意思| www.976470.com-168彩票开奖记录| www.db96.com-4亿彩票官网下载| www.uo19.com-合肥福彩快3走势图| www.57.cm-开彩大家喜-| www.17nc.com-澳客彩票开奖| www.369093.com-体彩排三19054| www.522299.com-5彩票5-| www.609774.com-福利彩票站点申请书| www.707851.com-竞彩误差值怎么看| www.851380.com-6盒彩开奖直播| www.30nz.com-福彩一般几点开奖| www.01484.com-博彩对冲套利是什么| www.957384.com-吉林快三彩票网|