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.957805.com-彩票快乐十分走势图| www.883143.com-网络私彩平台排行榜| www.yb2.cc-大发彩票app苹果| www.66364.com-宝乐彩提现-| www.295837.com-上海福彩开奖公告| www.7348.shop-彩虹六号透视挂| www.97184.com-3d彩宝网开奖结果| www.14672.com-2019年彩票放假| www.gi77.com-彩票守号-| www.1rk.com-博乐彩票注册登录| www.75vy.com-郑州5d彩超-| www.14fv.com-今晚七星彩直播| www.tx8.com-易彩彩民福地登录| www.971974.com-体育彩票案-| www.612021.com-买足彩软件哪个好| www.973652.com-七星彩的游戏规则| www.fq08.com-3d彩票中的死规律| www.96735.cc-用什么买彩票比较好| www.95789.com-2018彩礼排行榜| 500彩票www.51515h.com| www.296954.com-江西彩票快三走势图| www.89973.com-七星彩选摇号吗| www.791033.com-广西福彩官网开奖| www.983459.com-易发彩是真的吗| www.594207.com-快乐阳光七彩云下| www.sl10.com-博盈彩票诈骗| www.774921.com-瑞彩网登录-| www.41985.com-彩票害人不浅| www.859876.com-网上的极速一分钟彩| www.312307.com-福彩3d速查表图片| www.620181.com-釉上彩茶具有毒吗| www.736846.com-上海市福利彩票中心| www.254712.com-彩票网站大全app| www.376917.com-北京娶媳妇彩礼钱| www.82799.cc-2o13彩票网-| www.gy58.com-百盈彩票网址谁有| www.28988.com-彩神v8是骗局吗| www.50069.cc-01彩票com-| www.04wc.com-竞彩网官方-| www.22635.com-广东福彩微信号| www.976023.com-重庆彩礼-| www.913068.com-彩票中奖网站预测| www.3355.top-彩色的中国伴奏| www.307115.com-湖北快三三同号遗漏| www.ih92.com-体彩排五跨度走势图| www.mp73.com-体彩河北11选五| www.2917.biz-体彩店装修效要求| www.982457.com-鸿运来彩票是正规吗| www.cb45.com-抓黑彩需要什么证据| www.22er.com-酷彩吧中奖怎么领取| www.909.tv-高中生破解彩票| www.6468.xyz-巨彩51中奖怎么领| www.ib65.com-甘肃快三对子| www.e35.win-香港乐和彩158| www.465768.com-名人彩票登陆| www.560349.cc-澳门快三app| www.635813.com-七彩娱乐云南麻将| www.728633.com-体彩2009走势图| www.795078.com-重庆时时彩下注平台| www.867362.com-在线彩票都停售| www.947586.com-福彩有几种-| www.990565.com-全民彩票电脑版下载| www.mg8.com-吉林快三计划手机版| www.nf68.com-cp038彩票-| www.r66.biz-福彩真假-| www.33vf.com-点击彩是假的吗| www.79es.com-彩图体彩第一版| www.6907.org-七色彩票-| www.094503.com-1717彩票-| www.187956.com-福利彩票彩种| www.628555.com-福彩积分换彩票哪有| www.313075.com-体彩七星彩开奖号| www.209301.com-玩黑彩有赢了的吗| www.311525.com-五福彩票正规吗| www.948310.com-彩票哪个软件好| www.mp73.com-体彩河北11选五| www.8mt.cc-福利彩票机选概率高| www.89uj.com-为什么收到博彩短信| www.5819.biz-注册亚上彩| 500彩票www.314377.com| www.53rz.com-体彩店每月任务| www.1069.cn-老挝时时彩诈骗| www.712572.com-盛兴彩票v3手机版| www.1975.live-一线彩库-| www.808614.com-彩票工资车论坛| www.902328.com-经营黑彩多少判刑| www.965673.com-玩彩票安卓版下载| 91彩票网www.912452.com| www.382454.com-创富彩票苹果版| www.501518.com-网昜彩票-| www.580009.com-七星彩走势图怎么看| www.665653.com-彩票视讯app下载| www.747767.com-大富豪彩票游戏| www.819140.com-打彩票工资-| www.890984.com-幸运时时彩又叫什么| www.954880.com-澳洲五分彩开奖号码| 百姓彩票www.bxcp3.com| www.536916.com-买彩票的个性网名| www.390899.com-福利彩票用户注册| www.076837.com-大掌柜彩票下载安装| www.007512.com-彩客彩票手机客户端| www.790011.com-福彩中奖计算器| www.7413.vip-色彩斑斓的释义| www.75149.com-福彩刮刮乐有哪些| www.180201.cc-快三倍投计划表格| www.533873.com-七星彩怎么打规律| www.602537.com-体育彩票店盈利情况| www.677624.com-高频彩票资金分配图| www.332142.com-凤彩网双色球杀号| www.517568.com-诚信彩票网站| www.581762.com-凤凰彩票充值破解| www.666678.cc-五乐彩犯罪吗| www.728849.com-大连体彩中心在哪里| www.xs96.com-彩票电脑版-| www.117455.com-官方福彩幸运快| www.731049.com-胜负彩凯利指数分析| www.827794.com-网络彩票跟单员| www.907038.com-怎麽下載福利彩世界| www.972804.com-彩铅蝴蝶兰-| www.cp1676.com-十分快三计划预测| www.hg83.com-天天彩票app下载| www.9qi.com-体彩有几种买法| www.881685.com-h辉煌彩票-| 豪彩VIPwww.hc2588.com| www.003362.com-彩票大家玩-| www.097776.com-微信带玩快三| www.881941.com-八度彩票官方网站| www.hb.com-安徽快三出什么号| www.45666.com-拉萨福彩快3图分析| www.83aw.com-移动彩云怎么注销| www.5898.in-天价彩礼图片| www.556594.com-七乐彩什么时候开奖| www.481405.com-喝彩中华第二期| www.592349.com-彩虹七号游戏下载| www.683747.com-天天中彩票官方下载| www.61685.cc-大胜彩票是真的吗| www.026852.com-五八彩票官方网站| www.105623.com-好彩三开奖奖金查询| www.me18.com-彩票十分钟开奖| 鸿运彩票www.hy5508.com| www.86089.com-南京三彩折扣店| www.963666.cc-足彩实体店-| 众彩www.502892.com| www.348942.com-福彩体彩店转让| www.800607.com-彩票怎么看不懂| www.94ce.com-彩票七彩星开奖走势| www.808481.com-全国各地方彩票开奖| www.707598.com-鸿彩彩票网-| www.875276.com-彩票方下载-| www.510996.com-沂水彩虹谷好玩吗| www.592180.com-最好的彩票软件| www.012187.com-家彩网杀号-| www.106756.com-彩票雙色球-| www.875031.com-熊猫竞彩ios| www.974512.com-体彩大乐透选号规则| www.cp514.com-网上买彩票会坐牢吗| www.mw06.com-体彩app官方下载| www.1ws.com-彩色铅笔蝴蝶| www.25464.com-彩铅少女画-| www.84532.com-福彩3d彩圣字谜| www.262217.com-极速快三彩票| www.8720.cc-极速快三玩法简介| www.35659.cc-怎么下载百盈快三| www.13312.cc-一分快三手机破解器|