jquery div 可拖拽弹出对话框

最新推荐文章于 2024-02-05 11:29:35 发布

arkblue

最新推荐文章于 2024-02-05 11:29:35 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：其他前端文章标签： div jquery function button class input

本文链接：https://blog.youkuaiyun.com/arkblue/article/details/7342388

其他同时被 2 个专栏收录

21 篇文章

订阅专栏

前端

10 篇文章

订阅专栏

本文介绍了一个交互式网页应用，该应用通过弹窗实现任务选择、执行及管理功能，包括任务的添加、全选、反选、清除等操作，并提供了确认和重置按钮来完成任务的选择和执行过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码，文件pop-box.js

	// 弹出div
	function popupDiv(div_id){
		var div_obj = $("#" + div_id);
		
		//窗口宽度,高度
		var winWidth = $(window).width();
		var winHeight = $(window).height();
		
		//弹出的div的宽度,高度
		var popHeight = div_obj.height();
		var popWidth = div_obj.width();
		div_obj.animate( { opacity: "show", left: (winWidth-popWidth) / 2, 
				top: (winHeight-popHeight)/2, width:popWidth,height:popHeight}
		, 300);
	}
	
	// 隐藏div
	function hideDiv(div_id){
		$("#" + div_id).animate({opacity: "hide" }
		, 300);
	}
	
	// 拖拽
	$(function(){
		$(".pop_box").easydrag();
		$(".pop_box").setHandler(".pop_box .p_head");
	});
	
	// 把选择的任务填写到任务输入框
	$(function(){
		$("#confirm_select_task").click(function() {
			var data = "";
			 $('#taskListTarget option').each(function() {
				 data += $(this).val();
				 data += ",";
			 });

			data = data.substr(0, data.length - 1);
			
			// 输出到任务输入框
			$("#taskName").val(data);
				
			hideDiv("pop_div");
		});
	});


	// 添加选中的项到右边
	function addTask(){
		if ($('#taskListSrc')[0].selectedIndex < 0) {
			return;
		}
		var select = $("#taskListSrc option:selected").val();
		$('#taskListSrc option:selected').attr("disabled", true);
		$('#taskListTarget').append('<option>' + select + '</option>');
		$('#taskListSrc')[0].selectedIndex = -1;
	}		
	
	// 全选
	function addAll() {			
		$('#taskListSrc option').each(function() {
			if ($(this).attr('disabled') == false) {
				$(this).attr('disabled', true);
			
			var select = $(this).val();
			$('#taskListTarget').append('<option>' + select + '</option>');
			}
		});
		
		$('#taskListSrc')[0].selectedIndex = -1;	
	}
	

	// 反选
	function removeTask() {
		var checkText = $("#taskListTarget").find("option:selected").text(); 
		$("#taskListTarget").find("option:selected").remove();	
	
		$('#taskListSrc option').each(function() {
			if ($(this).val() == checkText) {
				$(this).removeAttr('disabled');
			}
		});  
	}		

	// 取消全部选中列
	function removeAll() {
		$('#taskListTarget').empty();
			
		$('#taskListSrc option').each(function() {
			$(this).removeAttr('disabled');
		});
		
		$('#taskListSrc')[0].selectedIndex = -1;
	}

css文件 pop-box.js

	.pop_box {     
		z-index: 9999;
		margin-bottom: 3px;
		display: none;
		position: absolute;
		background: #dedede;
		border-top: ridge;
		border-right: groove;
		border-bottom: groove;
		border-left: ridge;
		padding: 10px;
		font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		color: #4f6b72;
 	}
		   
	.pop_box_body{
        }
		   
	.p_h_x{
		float: left; 
		text-align:center; 
		font-size: 12px;
		font-weight: bold;		  
	}	
		   
	.p_btn {
		width: 60px;
	}

	.box {
		border: 1px solid #C0C0C0;
		width: 250px;
		clip: rect(0px,181px,16px,0px);
		overflow: hidden;
	} 

	select{
		position:relative;
		left:-2px;
		top:-2px;
		font-size:12px;
		width:250px;
		line-height:14px;
		border:0px;
	}

html文件 pop-box.html

<html>
  <head>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/jquery.easydrag.js"></script>
    <script type="text/javascript" src="./js/pop-box.js"></script>
    <link rel="stylesheet" type="text/css" href="css/pop-box.css" />
  </head>
  <body>    <button type="button" οnclick="popupDiv('pop_div');" value="pop box"/>
    <div id='pop_div' class="pop_box">
      <div class="p_head">
        <div style="float:right;">
          <input type="button" class="p_btn"  οnclick="hideDiv('pop_div');" title="关闭窗口" value="关闭">
          </input>
        </div>
        <div class="p_h_x">选择任务 ：</div>
        <div style="clear:both;padding:10px;">
          <table>
            <tr>
              <td align="right">
                <select id="taskListSrc" size="10" class="box" name="taskListSrc" οndblclick="addTask();">
                  <option>element1</option>
                  <option>element2</option>
                  <option>element3</option>
                </select>
              </td>
              <td align="center">
                <input type="button" class="p_btn" value="全选>>" οnclick="addAll()" /><br/>
                <input type="button" class="p_btn" value="添加->" οnclick="addTask()" /><br/>
                <input type="button" class="p_btn" value="<-删除" οnclick="removeTask()" /><br/>
                <input type="button" class="p_btn" value="<<全消" οnclick="removeAll()" />
              </td>
              <td align="left">
                <select id="taskListTarget" size="10" class="box" name="taskListTarget"  οndblclick="removeTask();">
                </select>
              </td>
            </tr>
          </table>
        </div>
        <div style="float:right">    
          <input id="confirm_select_task" type="button" value="确定" class="p_btn"/>
                
          <input id="reset_select_task" type="reset" value="重置" οnclick="clearFm()" class="p_btn"/> 
        </div>          
      </div>
    </div>
  </body>
</html>