jquery div 可拖拽弹出对话框

来源：互联网发布：mysql集群端口编辑：程序博客网时间：2024/06/11 18:39

js代码，文件pop-box.js

// 弹出divfunction 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);}// 隐藏divfunction 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" onclick="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"  onclick="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" ondblclick="addTask();">                  <option>element1</option>                  <option>element2</option>                  <option>element3</option>                </select>              </td>              <td align="center">                <input type="button" class="p_btn" value="全选>>" onclick="addAll()" /><br/>                <input type="button" class="p_btn" value="添加->" onclick="addTask()" /><br/>                <input type="button" class="p_btn" value="<-删除" onclick="removeTask()" /><br/>                <input type="button" class="p_btn" value="<<全消" onclick="removeAll()" />              </td>              <td align="left">                <select id="taskListTarget" size="10" class="box" name="taskListTarget"  ondblclick="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="重置" onclick="clearFm()" class="p_btn"/>         </div>                </div>    </div>  </body></html>