logo标签列表

jQuery UI 可拖动（Draggable）的手柄未生效。

jquery
3

我遇到了draggable的一个问题。我正在制作一个类似于窗口管理器的系统，并希望只能通过标题栏拖动窗口。问题是，出于某种原因，它没有按照预期工作。即使我明确将句柄设置为标题栏，它也允许我使用所有内容进行拖动。

<!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>
1个回答
2

标题栏包含所有其他元素，因此它们也可以拖动。您需要将所有内容包装在一个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>
....
你提到后我明白了。我确实有一个容器，但是最后发现我漏掉了一个</div>，并且多了一个</div>。 - Bryan Wöfter
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接