Question

我遇到了拖延问题。我正在制作一个Window Manager-esque系统，并希望拥有它，这样一个窗口只能被标题栏拖动。问题是，出于某种原因，这不是想做它应该做的事情。即使我明确地将句柄设置为标题栏，它也允许我拖动所有内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="CSS/Primary.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="javascript/jquery-1.8.2.js">
</script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.24.custom.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
  $("#LoginMinimize").click(function(){
    $("#divLoginBox").toggle();
  });
   $("#LoginClose").click(function(){
    $("#LoginContainer").remove();
  });
$( "#divLoginTitleBar" ).draggable({
    containment: 'window',
    scroll: false,
    handle: '#divLoginTitleBar'

});
});
</script>

<title>HEP Online --- Application Platform</title>

</head>

<body>

<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
    Login <div id="divTitleButtonBox" class="TitleButtonBox">
        <img src="images/minimize.png" id="LoginMinimize" height="24px" /> 
        <img src="images/close.png" id="LoginClose" height="24px" /></div>

<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">

<form method="post" action="" id="frmLogin">

<img src="images/loginsplash.png" />

    <table id="tblLoginContent" class="LoginContent">
        <tr>
            <td>Username:</td>
            <td>
            <input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>
            <input maxlength="24" name="txtPassword" size="20" type="password" /></td>
        </tr>
        <tr>
            <td><input name="btnLogin" type="submit" value="Login" /></td>
            <td><input name="btnReset" type="reset" value="Reset" /></td>
        </tr>
    </table>
    </form>
</div>
</div>
</div>
</div>

</body>

</html>

Answer 1

标题栏包含所有其他元素，因此它们也可以拖动。您需要将所有内容包装在div中并将标题栏设置为句柄。

所以你必须改变你的js以使包装div可拖动：

$( "#divLoginWindow" ).draggable({
containment: 'window',
scroll: false,
handle: '#divLoginTitleBar'
});

然后创建那个div。

<div id="divLoginWindow">
<div id="divLoginTitleBar" class="TitleBar">
Login
</div> <div id="divTitleButtonBox" class="TitleButtonBox">
    <img src="images/minimize.png" id="LoginMinimize" height="24px" /> 
    <img src="images/close.png" id="LoginClose" height="24px" /></div>
....

jquery UI Draggable Handle无法正常工作

1 个答案: