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.62872.cc-新彩票走势网势首页| www.993582.com-火箭彩票网平台| www.nu86.com-新疆肘时彩开奖号码| www.89935.cc-足球精彩网站| www.537093.com-五洲彩票如何登录| www.8917.xyz-七星彩几点截止购买| www.29gi.com-搜狐彩票平台| www.203548.com-彩迷网api-| www.586714.com-新mg送彩金-| www.764277.com-体彩p5-| www.026257.com-电子竞技博彩| www.131776.com-各地区彩礼价格表| www.475519.com-500彩票网完整版| www.298831.com-六给彩票香港图片| www.088228.com-澳客体彩足球强哥| 500彩票www.338017.com| www.019407.com-贵州彩票领奖地址| www.839655.com-中国彩票要倒闭| www.e31.club-牛彩藏机图谜汇总| www.xg70.com-七星彩2242-| www.t77.net-优彩交流论坛| www.150839.com-福彩复式怎么买列表| www.080259.com-彩打一生肖-| www.181833.com-038彩-| www.278851.com-福建体彩网31选7| www.375659.com-彩金神龙连线版下载| www.97298.com-彩票站广告牌| www.0900.net-如何线上买福利彩票| www.769.club-足球竞彩2串1玩法| www.314040.com-福利彩票数字规则| www.447996.com-福彩投诉网站| www.564377.com-深圳东方亮彩厂好不| www.839096.com-快三有啥技巧| www.57zm.com-雪缘足彩比赛直播| www.12ou.com-彩名堂官网网址| www.165729.com-旺彩3d杀号码定胆| www.np46.com-彩票中奖生成器| www.54vd.com-福彩3d012-| www.233413.com-体彩快中彩开奖| www.304834.com-彩票app推荐| www.12uv.com-免费彩金棋牌游戏| www.182069.com-网易快三是真的吗| www.261903.com-彩票平台送彩金| www.537228.com-中彩票的下场| www.881666.cc-8k彩票-| www.778118.com-大奖分分彩计划| www.875266.com-江苏快三是合法的| 百姓彩票www.bxcp3.com| www.627531.com-帝王彩集团-| www.736595.com-彩客比分完整版| www.904756.com-福州福彩中心电话| www.987535.com-我中啦彩票app| www.5jd.com-网上哪里买彩票| www.1849.cn-大发快三不倒翁投注| www.840158.com-足彩模型-| www.258244.com-江苏快三怎么买| www.1408.vip-好运来高手彩坛| www.572280.com-福彩3d万能五码| www.850.cm-大乐透专家彩88| www.08464.com-彩友网6hcyw| www.8ik.cc-体彩单场预测推荐| www.522196.com-快三必中高手大全| www.600029.cc-2块钱买彩票中大奖| www.138385.com-福彩九加五多少钱| www.800894.com-利盈彩票下载| www.420261.com-中国竞彩网实时比分| www.926557.com-彩票种类价格| www.812522.com-福彩3d书-| www.3423.org-福彩双色球购买| www.73nb.com-完美彩票网站可信吗| www.1150.cc-彩视制作收费吗| www.bg49.com-博彩app排名| www.2887.vip-酷彩安卓app| www.282279.com-买彩票诀窍-| www.353098.com-福利彩双色球走势| www.8179.cn-贵州快三定位走势图| www.769272.com-什么是好彩网| www.262357.com-福彩3d口诀-| www.46780.com-福星彩运开奖直播| www.292922.com-智慧彩客户端| www.393983.com-色彩对比构成| www.548091.com-28c彩票计划| www.639763.com-幸运彩票棋牌| www.768400.com-时时彩杂六半顺规律| www.898916.com-美团彩票如何领取| www.979285.com-彩71app下栽| www.an70.com-贵州体彩好-| www.vd87.com-彩神通论坛-| www.356958.com-怎样买彩票中7百万| www.442381.com-足彩11248计划| www.532240.com-七星彩怎样算是中奖| www.814526.com-nba球彩怎么买| www.0563.tv-福利彩票3d迷| www.692195.com-彩票小助手五星计划| www.817357.com-网络彩票骗局报警| www.924923.com-凤凰彩票官网| 开心彩票www.250552.com| www.777037.com-彩票app宝盈| www.880758.com-淘宝彩票入口在哪| www.962404.com-选彩票号码-| 大赢家彩票网www.83033j.com| www.9712.biz-彩票中奖秘籍| www.76133.cc-彩票损坏了一角| www.293767.com-彩票帮投骗局| www.233322.com-吉林快三稳赚技巧| www.340231.com-下载旺彩彩票软件| www.490897.com-彩票二串加奖| www.596626.com-甘肃快三是合法的吗| www.668972.com-福龙彩票信息网| www.736729.com-福建彩11选5规则| www.798613.com-彩虹8app彩票| www.860025.com-网上拉人买彩票骗局| www.925496.com-旭彩网平台-| www.977981.com-彩钢瓦寿命-| www.954253.com-利博彩票下载| www.302806.com-彩票天下23cc| www.419983.com-世界杯体彩销售额| www.568916.com-星耀国际彩票| www.653885.com-500竞彩比分网| www.746022.com-彩票复试奖金计算器| www.pw72.com-西官彩-| www.4256.xyz-优乐彩网址-| www.030043.com-大家赢彩票app| www.127428.com-日彩网是骗局吗| www.199715.com-河北快三三号码推荐| www.559029.com-满洲里市福彩中心| www.633619.com-腾讯幸运彩-| www.7587.biz-爱彩人app苹果| www.28289.cc-福彩字谜画谜总汇| www.53144.com-m5登录彩票-| www.015050.com-海南七星彩口诀| www.121043.com-体彩五排奖号| www.217562.com-安徽快三今天推荐号| www.648628.com-香港行政快三app| www.856588.com-中国七星彩在线| www.949213.com-3d彩票预测资询| www.994078.com-彩票分析大师下载| www.br85.com-赢彩网快三计划| www.07ns.com-唯彩会姜山足彩冷门| www.415.com-彩票生活699| www.520355.com-腾讯分分彩后二8码| www.072260.com-掌优彩票靠谱不| www.929225.com-彩票有没有弄虚作假| www.991113.com-专业购彩平台tt| www.qf11.com-彩票77官网下载| www.31ri.com-美国彩票中奖玩法| www.97234.cc-彩礼8万女方陪嫁| www.212882.com-搭建私彩票网站| www.389736.com-体育足球彩票| www.95373.cc-彩票店五行属什么| www.6868.cc-彩运宝门店管理系统| www.019223.com-贵阳彩票-| www.363634.com-刘小刚重彩绘画| www.04444.cc-北京体彩扫码投| www.96929.com-彩票中奖真假| www.497686.com-辉煌体彩-| www.7453.cn-体彩申请网点| www.69668.com-大彩鲸网页-| www.683158.com-老凤祥彩金调换规则| www.30630.com-福彩3d网址-| www.232733.com-上海快三死规律| www.365794.com-白凤九彩铅画画法| www.030811.com-61彩-| www.69047.com-手机彩膜多少钱一张|