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.0536.live-精准快三计划软件| www.381476.com-大乐透彩开奖号码| www.564549.com-南国彩票梦册解梦| www.730362.com-新彩网3d字谜图谜| www.cai0123.com北京快三和值| www.360685.com-快三有哪些玩法| www.54267.cc-甘肃兰州快三查询| www.082853.com-手机上玩快三犯法不| www.877486.com-r8国际彩票合法吗| www.02722.com-一号彩票下载安装| www.58952.cc-35cc天空彩-| www.050439.com-河南幸运彩最新开奖| www.133339.com-下载彩视-| www.cp8796.com-福彩上海快三形态图| www.066624.com-篮球彩票软件| www.444746.com-天恒彩票app| www.81pl.com-赣州福利彩票店店址| www.64wg.com-多多中彩票下载安装| www.234760.com-体彩竞彩网-| www.255321.com-彩票玩法大乐透| www.4454.cn-如何在网上买彩票| www.226055.com-赚钱彩票-| www.313592.com-安徽快三走势下载| www.393948.com-足彩竞猜投注助手| www.566803.com-6768彩票网平台| www.641522.com-网络图标彩票网站| www.768203.com-安徽快三助赢手机版| www.885318.com-最有收藏价值的彩票| www.974682.com-七星彩36期开奖| www.cp3188.cc-河南快三走势图在线| www.tb07.com-彩票彩种有哪些| www.22es.com-地下六仺彩开奖网站| www.cai3755.com快三高手经验| www.227351.com-广西快三号码推荐| www.32192.cc-易彩集团靠谱么| www.101349.com-掉了中彩网了d| www.273116.com-福彩大奖组时期| www.495400.com-彩漂可以去油渍吗| www.777608.com-买七星彩app| www.47tt.com-开一家福彩店流程| www.52739.cc-55彩票ios-| www.306389.com-做梦买彩票中奖| www.5760.cc-地下彩票犯法吗| www.71113.com-彩票大数据运算公式| www.654505.com-七星彩最新规律图规| 鑫亿彩www.053059.com| www.yb86.com-爱彩乐算什么彩票| www.295516.com-彩票中奖纠纷案例| www.777703.cc-福利彩票在哪兑奖| www.860766.com-河北快三推存号码| www.303760.com-福彩天地报纸最新| www.71127.cc-福彩双色球现场直播| www.019531.com-福彩3d神六鬼算| www.365193.cc-玩彩票跟计划赚钱吗| www.wx45.com-福利彩票七乐彩| www.62889.cc-万彩吧马会幽默| www.555530.cc-神彩网合法吗| www.120181.com-彩票开奖-| www.275708.com-彩6彩票精华版| www.074342.com-旭彩美缝剂价格| www.455691.com-彩票类小说-| www.402824.com-海南七星彩下载安装| www.08433.com-彩神通彩票软件好| www.105333.com-手机时时彩网址| www.475966.cc-北控国彩加盟| www.706938.com-500彩票官网首页| www.026364.com-赢家彩票网站| www.187822.com-7星彩中奖规则| www.977975.com-快三能赢钱-| www.489618.com-七乐彩中七保六| www.718382.com-彩虹七种颜色的寓意| www.b35.cm-江苏快三官方| www.220611.com-快三助手app苹果| www.992525.com-158彩票正规吗| www.ki76.com-福彩走势-| www.26mz.com-今天福彩三d报纸| www.328786.com-吉利快三预测| www.642835.com-胜负彩一手机新浪网| www.078050.com-中国彩票作假视频| www.198628.com-大发彩票app平台| www.80uz.com-彩票下注网-| www.818988.com-买彩票经验-| www.16849.cc-九五彩票app| www.031006.com-彩票骗局相亲| www.02fd.com-专业彩票走势图| www.4xn.com-中国福利彩票aop| www.754347.com-新华网山东彩票| www.698934.com-公益彩票是骗人的吗| www.945036.com-17500彩票论| www.37588.cc-江苏七位数彩票| www.735172.com-快三上海开奖结果| www.277712.com-黑彩网址攻击软件| www.422665.com-注册送彩金游戏| www.5068.com-旺彩大乐透在哪领奖| www.922633.com-人人彩票预测软件| www.44bp.com-出色和出彩的意思| www.812363.com-福降天下凤彩网| 日彩网www.rcw8899.com| www.10817.com-鲸落水彩-| www.958630.com-七星彩数据计划| www.062574.com-五星彩票是正规的吗| www.387972.com-华彩在线是啥| www.3735.cn-彩票管家安全吗| www.7345.in-彩虹6视频-| www.890649.com-南方双彩网143期| www.43273.com-新粤彩1000论坛| www.189912.com-河北彩票快3走势图| www.464611.com-联运彩票-| www.636551.com-彩虹儿歌歌曲英语| www.766624.com-环彩彩票网-| www.954487.com-高频彩票倍投计算器| www.152662.com-海南私彩头尾规律| www.808723.com-体彩分析预测| www.586185.com-彩宝网福彩开机号| www.733735.com-体育彩票出什么| www.008423.com-彩票平推一天| www.120268.com-什么是腾讯五分彩| www.227672.com-福彩有一分钟快三吗| www.lf20.com-彩19-| www.12sj.com-快三助手老版| www.545.in-人工在线快三| www.260562.com-赌博和彩票的区别| www.412760.com-游戏竞彩软件排行| www.069853.com-鑫彩网骗局揭秘| www.85fr.com-足彩新手如何看盘| www.7408.pw-色彩静物临摹| www.94905.com-卡姿兰彩妆加盟| www.140046.com-ip幸运快三代玩| www.268217.com-随州快三论剑| www.488584.com-天天彩票网投娱乐场| www.25ia.com-北京华彩-| www.5294.biz-盈发彩票-| www.bf37.com-快彩是骗局吗| www.774024.com-福乐彩28靠谱吗| www.h95.net-鸿彩彩票软件下载| www.120339.com-五分彩官网app| www.313563.com-华夏彩票官网首页| www.751451.com-50o彩票网-| www.411763.com-五分彩长龙-| www.566514.com-彩虹6号刘醒配置| www.55259.cc-彩票排列五开奖查询| www.113551.com-成都快三-| www.002387.com-吉林快三怎么玩儿| www.151594.com-彩乐汇-| www.152405.com-吉祥彩票计划软件| www.2567.pw-中信彩票输了一万五| www.51495.com-双色球中彩网首页| www.062472.com-59彩票网-| www.091977.com-博盈彩票网安全吗| www.215920.com-七星彩几个号算中奖| www.335920.com-九亿彩票可提现金额| www.878975.cc-吉林快三跨度预测| www.310625.com-云南省体彩兑奖地址| www.516723.com-色彩知识-| www.fs92.com-百盈快三投注经验| www.090227.com-彩票凤彩网下载| www.rn99.com-8号彩票靠谱吗| www.353892.com-彩票店没人怎么办| www.737711.com-大发彩注册送彩金| www.075130.com-梦想彩票手机版下载| www.299132.com-大发时时彩六码计划| www.620731.com-马彩她-| www.780007.com-福彩3d讲座-| www.286214.com-福利彩票快乐彩|