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天

知道了
彩01彩票 www.363578.com-福彩天齐网保真| www.63113.com-河南结婚彩礼法规| www.410600.cc-七彩球怎么拼装教程| www.107954.com-福彩开奖作弊视频| www.52jk.com-利彩有風險嗎| www.gr92.com-成功彩票-| www.2lp.com-体彩11选五靠谱吗| www.670009.com-天涯社区海南彩票| www.797924.com-河南买彩票的时间| www.890240.com-福彩3d字谜大全| www.237.loan-3分钟开一次的彩种| www.9271.loan-乐彩彩票计划| www.557834.com-金山彩票骗人| www.323247.com-机选彩票中奖率高吗| www.880850.com-广东快三官网下载| www.751844.com-一定牛彩票是真是假| www.614343.com-彩的组词是什么意思| www.162232.com-福利彩票中奖率| www.339258.com-深圳体彩中心地址| www.5525.org-白云彩虹图片简笔画| www.434543.com-彩票投注单打印软件| www.576389.com-足球彩票系统升级| www.693379.com-广州彩票兑奖在哪里| www.969403.com-酷彩吧买彩票| www.ed38.com-全球最大彩票官网| www.13sb.com-体彩编号如何查询| www.019389.com-毕节市福利彩票中心| www.155109.com-足彩兑奖规则| www.244029.com-彩票走-| www.328286.com-福彩三地专家预测号| www.965669.com-广东的中国福彩网| www.222446.com-快三对子投注技巧| www.315978.com-星彩3d论坛预测| www.992420.com-河南快三买和值| www.fy74.com-q彩网-| www.224406.com-快三怎么玩可以赢钱| www.165384.com-全民彩票专业平台| www.270353.com-福彩七乐彩开奖结果| www.6669.net-神彩物流被骗视频| www.5603.cm-彩票程序源码手机| www.653782.com-两张彩票百度网盘| www.530409.com-时时彩前三万能四码| www.490410.com-淘宝上买彩票合法吗| www.828729.com-98198w彩票网| www.36dn.com-彩票奖号能算出来| www.139256.com-68z彩票-| www.554850.com-香港好彩堂资料大全| www.9766.net-七星彩二等奖概率| www.06602.com-彩票复式中奖多少钱| www.95020.com-福彩刷流水兼职| www.276060.com-七乐彩复式价格表| www.656565.com-北京福彩一等奖中奖| www.551189.com-彩王软件-| www.52268.com-体彩浙江飞鱼彩票| www.911034.com-快三豹子规律河北| 全民汇彩票www.52303x.com| www.0776.cn-竞彩足球实时比分| www.7032.vip-希腊5分彩网址| www.4iu.com-我爱彩票开奖结果| www.019738.com-福彩加盟电话多少| www.778992.com-体彩排列五中奖地方| www.913533.com-精准彩票预测网站| www.976681.com-四川各地彩礼价目表| www.cp8411.com-六开彩开奖今天| www.71id.com-下重庆7时彩| www.036047.com-彩计划下载福彩3| www.3968.cc-4494cc天下彩| www.611887.com-福彩3d方案详情| www.820569.cc-七星彩直播现场视频| www.369740.com-博胜彩票网址下载| www.464646.cc-怎么可以中彩票3d| www.536939.com-中国体彩头像| www.140856.com-海南七星彩彩版专区| www.30986.com-彩票中奖恶搞图| www.88088.com-118彩票平台网址| www.631356.com-2018年顺丰彩票| www.ag08.com-彩票开奖结果哪里查| www.tc41.com-彩票昵称大全| www.vu3.com-上海快3彩票查询| www.954931.com-有没有黑客黑时时彩| www.126671.com-微信上可以买彩票吗| www.203971.com-上海基诺彩票玩法| www.288693.com-体彩竞彩怎么看奖金| www.365229.com-湖北快三加奖取消| www.475966.cc-北控国彩加盟| www.568800.com-bb梯子彩票规则| www.645244.com-彩霸王水高手论坛| www.813663.com-宁夏彩票最大奖| www.894896.com-超级大乐透彩票投注| www.963112.com-彩铅画动漫人物| 乐彩网www.160913.com| www.396696.com-美国彩票中奖玩法| www.572955.com-湖快三走势图彩乐乐| www.0296.cm-彩票站倒闭-| www.68725.cc-分分快三被骗| www.025761.com-喜乐彩票app下载| www.xc50.com-特区七星彩论坛最新| www.21bl.com-福彩今晚结果| www.575.me-玩私彩多少金额违法| www.4518.com-19020期体彩| www.004663.com-竞彩规律-| www.45488.com-七乐彩中奖查询一| www.739595.com-福彩快三回血诀窍| www.71237.com-褔体彩开奖结果| www.33279.com-篮球体彩开奖时间| www.911021.com-福利彩票奖项几个球| www.959264.com-3d新彩网字谜总汇| www.852084.com-足彩竞彩恒大| www.125812.com-众购彩票网导航| www.283010.com-体彩投注限额| www.454779.com-世界四大博彩公司| www.871194.com-3d推荐星彩网| 鑫彩网www.292866.com| www.040206.com-快三2同-| www.258668.com-nba竞彩-| www.616278.com-中国竞彩中奖查询| www.q37.me-广西快三全天| www.689944.com-谁有玩快三的群啊| www.77vq.com-美国彩票-| www.068712.com-鸿彩骗局-| www.120693.com-竞彩足球兑奖有效期| www.102357.com-qq彩票谁代理的| www.985715.com-福利彩票手机能买吗| www.cz43.com-幸运一分快三| www.873037.com-大发彩票时时彩| www.ko4.com-快三吉林玩法| www.4285.biz-奇妙时时彩k线软件| www.27153.cc-新彩票论坛手机版| www.80277.com-彩票平台导师| www.345146.com-彩云宝-| www.632430.com-成都七彩田野| www.861100.com-福彩3d摇奖直播| www.cai6605.com快三技巧稳赚| www.108.cm-高手万人交流彩坛| www.4909.top-500c0m彩票网| www.586430.com-开心中彩票官方网站| www.239159.com-快三是不是有人控制| www.t48.cc-彩尊在线登录| www.2498.cc-福彩门户的门户网站| www.776000.com-时时彩相对稳定玩法| www.145558.com-竞彩310比分直播| www.221852.com-今晚七星彩开奖号码| www.0052.cn-一组彩票多少数字| www.118129.com-168彩票正版资料| www.nt00.com-网上彩票赌博合法吗| www.490031.com-七乐彩奖池走势图| www.98781.com-今天上海快三开奖规| www.118566.com-体彩开奖在哪个台| www.237654.com-彩票官方版app| www.388021.com-体彩机器转让| www.021250.com-大发时时分分彩| www.327486.com-福利彩近期开奖号码| www.391475.com-艾彩原味踩踏其它| www.480045.com-3d新浪彩票资讯| www.547706.com-彩票七乐彩怎么买| www.687006.com-中彩票巨奖的人| www.757065.com-全民彩是骗局吗| www.819159.com-彩票怎么算概率| www.875479.com-c45彩票下载| www.7685.cn-一出好戏彩票软件| www.864776.com-手机彩膜模切机| www.033851.com-彩世界吾记app| www.110932.com-20选5彩票注册| www.3788.net-彩先知欲钱料|