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.075255.com-彩6采票app-| www.207091.com-至尊快三是骗局么| www.638818.com-足彩竞彩现场直播| www.729435.com-双色球新浪爰彩| www.820115.com-天津彩票app| www.918830.com-彩票外围-| www.987107.com-购彩堂下载安装| www.62786.cc-所新浪竞彩比分| www.216391.com-大吉彩票-| www.365278.com-乐购彩骗我-| www.dc93.com-人人竞彩-| www.296061.com-湖北快三在线杀号| www.72881.cc-3d的彩界小少爷| www.zq83.com-体彩飞鱼口诀| www.87ft.com-广州羊城晚报好彩图| www.689302.com-6118彩票平台| www.802779.com-彩票中奖多久领取| www.913827.com-彩乐园2下载安装| www.983742.com-彩票店兑奖有返点么| www.hk79.com-体彩足球玩法介绍| www.55mk.com-重庆体彩领奖地址| www.2278.com-福彩中心怎么改| www.9570.org-美国彩票介绍| www.739020.com-福彩怎样中500万| www.456000.com-3d彩报第二版| www.549527.com-网易彩票旧版首页| www.870890.com-41彩票网下载| www.975524.com-湖南省福彩中心域名| www.dh22.com-彩票达人推荐| www.t60.com-彩尊骗局-| www.10ed.com-体彩排列三试机号码| www.3343.net-频彩网址-| www.9667.top-彩宝网app-| www.99382.cc-福利彩票出号规律| www.764404.com-幸运彩票注册送彩金| www.709345.com-网上带领买彩票| www.250054.com-河北冀彩宝下载| www.334831.com-河北快三分析预测| www.bs43.com-福到彩票福建快三| www.2628.net-怎样玩一分快三| www.806870.com-香港赛马会投网彩票| www.3058.cc-彩票指南报纸41| www.217357.com-快彩下载安装到手机| www.302544.com-中彩网骗人-| www.5171.top-足彩19003任九| www.59300.com-快三棋牌-| www.607096.com-天津彩票中心电话| www.083634.com-吉彩彩票是什么东西| www.175726.com-江苏快三神计划| www.1703.cn-天际彩专员-| www.n74.club-体彩最新开奖号码| www.93sv.com-k彩教程-| www.526835.com-博盈彩票的骗术| www.616796.com-香港福彩快三实体店| www.740916.com-彩5网-| www.838046.com-贵阳彩票站-| www.909722.com-玩彩独胆王-| www.998769.com-中国体育彩票店铺| www.hv25.com-808彩票网早版| www.657427.com-彩票2元网是真的吗| www.761601.com-体彩网排列五走势图| www.862536.com-澳客网彩票预测专家| www.939265.com-北京市体育彩票网站| www.998949.com-湖北快三和值走| www.aq99.com-广西快三官方开奖| www.vi60.com-快三精准计划app| QQ彩票www.89894i.com| www.976468.com-中彩彩票大小单双句| www.712078.com-结婚彩礼钱-| www.836207.com-九龙中彩牛仁五肖| www.965510.com-楚天福彩精彩十分| www.gm19.com-江苏快三是传销吗| www.97ek.com-中国福利彩中奖金额| www.64224.com-天天彩票提现失败| www.840913.com-彩票中奖是给支票| www.194462.com-正德财神彩票| www.484540.com-北控京彩彩票新零售| www.650741.com-超级简单水彩风景| www.772369.com-多种彩票网站大平台| www.713059.com-吉林快三案-| www.795596.com-共享彩票app官网| www.869283.com-七星彩2元-| www.929170.com-博牛彩票破解方法| www.983897.com-1980彩下载-| www.at48.com-贵州快三和值走势图| www.ug17.com-今天众彩网程远杀号| www.68dh.com-苹果竞彩258下载| www.6120.cn-加利福尼亚彩票| www.21808.com-大优手机彩票平台| www.864253.com-曝彩堂大乐透预测| 天天彩www.cp718.vip| www.0699.net-易彩堂彩票网址| www.69445.com-五百vip彩票网| www.0057.cm-3d立体动画彩铅| www.9787.vip-正版彩票大师下载| www.51216.com-3d福彩藏机图今天| www.300110.com-快三安徽形态走势图| www.14fk.com-海南七星彩视频直播| www.2514.pw-亚博彩票官网| www.25971.cc-彩虹颜色含义| www.021869.com-卖家购物送彩票| www.jl86.cc-彩票漏洞骗局| www.591511.com-新橙博彩靠谱吗| www.679030.com-糖果派对怎么拉彩金| www.883131.com-足彩设胆有什么好处| www.3166.net-彩票组合软件哪个好| www.530338.com-简单彩铅画入门画| www.951075.com-新华网彩票频道| www.29571.cc-彩乐-| www.059548.com-k彩彩富民地| www.043536.com-今日3d彩民乐彩吧| www.53211.com-国乐彩软件在哪下载| www.66035.cc-时时彩机器哪里有| www.019427.com-贵州省体彩中心电话| www.114106.com-二十选五彩票开奖号| www.187066.com-吉林快三有玩的吗| www.53iz.com-重庆时彩平刷软件| www.223997.com-北京福利彩票快三| www.391131.com-体彩11选5私彩| www.565895.com-博彩跳槽送彩金| www.719235.com-描写彩虹的好词| www.237874.com-中国福彩官网| www.396183.com-周六可以买什么彩票| www.917426.com-必赢彩票软件下载| www.987493.com-乐彩网排列三走势图| www.kj76.cc-易彩票软件-| www.08ko.com-728彩票是骗局| www.751180.com-博牛彩票是骗人的吧| www.870425.com-下载买双色球彩票| www.932773.com-乐彩网-官方网站| www.984647.com-m5彩票平台注册| www.cp3313.com-三分快三怎么看规律| www.jl55.cc-博彩充值漏洞| www.yb69.com-天津体育彩票| www.790.biz-逆袭彩票计划软件| www.103614.com-九州彩票软件| www.0213.biz-荣耀彩票线路导航| www.00889.com-手机乐彩论坛首页| www.87738.com-盛兴彩票站-| www.948476.com-t体彩大乐透| www.751702.com-世界杯足彩赔率| www.86557.com-掌上彩票下载地址| www.055299.com-吉林快三网盘申请| www.576904.com-团彩网可信吗| www.644175.com-黑彩网站关闭| www.730251.com-互娱彩票huy02| www.03tx.com-福利彩票如何玩| www.8256.shop-一定牛彩票站| www.696795.com-彩客竞彩网-| www.108912.com-彩泥大全-| www.438950.com-竞彩足球二选一怎么| www.612699.com-陕西宝马彩票案刘亮| www.719801.com-808七星彩规律图| www.44345.cc-网易我要中彩| www.088674.com-网络售彩-| www.904069.com-彩世家-| www.56774.com-火箭彩票下载安装| www.au11.com-福彩十分钟开奖| www.yn88.com-购买双色球彩票百度| www.fr53.com-快三遗漏号码查询| www.29bz.com-彩票3d昨晚出的多| www.0758.win-3打1送彩金-| www.3721.xyz-凤彩官方下载苹果版| www.5602.cn-宁夏省福彩中心|