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天

知道了
1分快三 www.24jv.com-彩屏手机-| www.55238.com-国彩彩票合法吗| www.591097.com-晴予七星彩今晚预测| www.00057.com-彩票刮刮卡中奖图片| www.cp874.com-台北快三官网| www.j50.club-彩票软件中了二等奖| www.485428.com-大发彩票ap平台| www.0794.date-锋彩tv版直播| www.111116.com-长乐坊彩票能提款吗| www.nh17.com-购彩xr-| www.165377.com-71彩票正规吗| www.609047.com-彩票自动下单源码| www.881845.com-倍投彩票-| www.961847.com-成都竞彩快三开奖| 大钱庄彩票www.909888.com| www.ai23.cc-周五那些彩票开奖| www.f04.net-七乐彩机选投注| www.45687.cc-大中华彩票提现成功| www.087605.com-彩票投注站会改革吗| www.197081.com-福利彩票123| www.292336.com-内蒙快三走势一定牛| www.400648.com-七星彩最近10期| www.054924.com-吉林快三庄家骗局| www.497581.com-玖富彩票平台怎么样| www.cp430.cc-快三输了回血找我| www.936381.com-足彩分析姜山冷门| www.328323.com-彩吧44462-| www.eg10.com-百姓彩票49-| www.x70.cn-国家体彩网官网| www.95dj.com-中国彩吧彩吧助手| www.733770.com-福彩6十1开奖时间| www.177064.com-三分快三怎么看规律| www.292732.com-彩票没人领河南| www.403930.com-彩陶传奇-| www.512589.com-水溶彩铅的画简单| www.579938.com-七乐彩晚上几点开奖| www.122579.com-乐彩vip登录| www.40732.com-快三上海走势图| www.025907.com-七乐彩今日开奖情况| www.204972.com-陕西福彩电话号码| www.347005.com-七乐彩和值尾数杀号| www.483620.com-大六壬预测彩票号码| www.715279.com-足彩票达人预测准吗| www.811099.com-购彩之家app安装| www.912729.com-彩客站计划群| 顶级娱乐www.687198.com| www.17hi.com-彩民商城-| www.535929.com-八位数彩票怎么买| www.631126.com-玩网上彩票的技巧| www.717857.com-彩库宝典ios| www.808365.cc-彩金狮王游戏机| www.901686.com-体彩试机号几| www.978536.com-彩8彩票苹果版下载| www.al34.com-上官燕七星彩预测| www.850759.com-体育彩票号码机选| www.961480.com-彩票计算器360| www.cai3456.com彩票破解术-| www.554906.com-全民中彩票软件| www.028809.com-合肥福彩中心电话| www.lk54.com-彩八彩票ios版| www.661503.com-779彩票网合法吗| www.741332.com-王者28高频彩| www.026151.com-网上怎么开设私彩| www.956323.com-28高频彩-| www.616112.com-即开彩票利润| www.782763.com-51彩虹挂挂-| www.921197.com-3d彩票算法教程| 鑫彩网www.xcw866.com| www.113425.com-众彩极速赛车| www.197956.com-三d彩票开奖号码| www.775453.com-彩票一般买几注| www.872231.com-中港澳彩票-| www.948321.com-彩吧论坛天齐网首页| 500彩票www.50052n.com| www.86809.com-彩王争霸下载| www.642743.com-上海体彩11-| www.751858.com-一号娱乐彩票| www.836966.com-天下移彩票-| www.904226.com-安徽快三大图| www.968561.com-乐彩app苹果版| 13e彩票www.128760.com| www.206737.com-1分钟一期的快三| www.25xv.com-彩友会黑钱-| www.2959.biz-福彩3d公式怎么算| www.27595.com-彩票专用计算机| www.293639.com-东方福彩6+1| www.367179.com-刚力彩芽日历| www.472251.com-还有哪些彩票软件| www.974454.com-快三根据什么出号| www.573061.com-大玩家彩票天猫| www.523207.com-彩票计划跟投| www.940.date-彩票均衡原理实战| www.99691.com-c27彩票app-| www.092098.com-新浪彩票走势图大全| www.23io.com-运盛彩票导航路线| www.uw59.com-福彩双色球开奖| www.33hr.com-彩票字迷牛材网| www.50868.cc-快频彩平台-| www.211852.com-内蒙彩票十一选五| www.562455.com-皇轩彩票网址| www.311768.com-买快三彩票是赌博吗| www.780.in-福彩中心预测| www.872368.com-江苏省体育彩票11| www.379545.com-益博时时彩计划| www.564999.com-河南快三和值| www.15656.com-彩铅画画教程图解| www.868232.com-七星彩高手交流区| www.937211.com-五福彩新版下载| www.986948.com-快三如何作弊| www.as65.com-七乐彩走势图| www.ud04.com-体彩排列3奖金多少| www.832570.com-云视新闻七彩云直播| www.897835.cc-黑龙江快三微信群| www.957040.com-7k彩票网556| 爱购彩票www.igcp4.com| www.19dj.com-彩票星期五开什么奖| www.22593.cc-盛兴彩票手机登录版| www.72339.cc-规模最大的彩票软件| www.660347.com-体彩排列三直播| www.675373.com-下载鸿博彩票软件| www.01238.cc-最新送白菜彩金网站| www.668420.com-彩票中奖101亿| www.784722.com-海南7星彩大师群| www.870513.com-卓易彩票官方| www.016188.com-福彩3d杀号牛材网| www.529719.com-大金鸡七星彩下载| www.597032.com-吉林快三形势走势图| www.231831.com-那个彩票软件最正规| www.329677.com-彩票史最高奖金| www.944904.com-82彩票下载-| www.52rv.com-竞彩单关结果统计| www.1854.net-足球博彩看盘网站| www.53012.com-福彩五码遗漏| www.96432.com-福彩电脑票时期| www.063930.com-足球彩票赔率怎么算| www.67938.com-腾讯1分彩-| www.077890.com-中国五分彩-| www.136986.com-彩票网站源码一条龙| www.205899.com-帝王彩票兼职靠谱吗| www.308938.com-体彩开奖结体采果| www.365092.com-惠民福利彩票| www.4486.cn-竞彩足球直播500| www.13272.com-竞彩倍投-| www.57023.com-大发时时彩快3技巧| www.166029.com-被关掉的彩票黑平台| www.25532.cc-河北快三出奖号码| www.63199.cc-体彩福彩开奖| www.95542.cc-纯化镇福利彩票| www.033848.com-凤凰彩票赛车开奖| www.99983.cc-彩票资抖大全| www.125658.com-体彩排3预测| www.971364.com-中国福彩3d诗谜| www.033071.com-鹤壁彩票-| www.515196.com-体育彩票结果| www.625198.com-98彩票网可靠吗| www.713402.com-福彩3d杀号专家号| www.776223.com-天下彩免费资料彩| www.868173.com-七星彩这期规律图| www.67ny.com-体彩大乐透5亿得主| www.852922.com-中国福彩阳光开奖| www.180118.com-福彩幸运快三| www.077433.com-福彩三d天庚大帝| www.835136.com-全民福利彩票赚钱| www.93fw.com-领彩票一等奖怎么领|