3

ドラッグ可能に問題があります。私はウィンドウ マネージャー風のシステムを作成しており、タイトル バーでのみウィンドウをドラッグできるようにしたいと考えています。問題は、何らかの理由で、これが本来あるべきことをしたくないということです。明らかにハンドルをタイトル バーに設定していますが、すべてをドラッグできます。

<!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>
4

1 に答える 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>
....
于 2012-10-05T01:34:41.827 に答える