13

クライアントのサイトをフレームセットから div に変換しています。クライアントが持つ機能の 1 つは、ユーザーが必要とするスペースに応じてサイズを変更できるサイドバーです。フレームを使用すると、このサイドバーのサイズ変更が組み込まれています。ただし、jQuery でこの機能をエミュレートするのに苦労しています。

これを行うために jQuery UI を使用したくはありません。UI スイートが提供するすべての追加機能は必要ありません。これを処理するために数行のコードを記述するだけです。

水平面でのみサイズ変更する必要があり、垂直方向の寸法は固定されています。

現在、私は（一種の）機能するソリューションを持っています。サイドバー div はサイズ変更できますが、ユーザーがサイズ変更可能な div をクリックし、マウスをドラッグしてから、div を再度クリックした場合に限ります (mousemove イベントを削除するため)。

私が望むエクスペリエンスは次のとおりです。ユーザーはサイズ変更可能な div の上にカーソルを置き、マウス ボタンを押し下げてから、div をドラッグして大きく/小さくし、ボタンを放します。

私が抱えている問題は次のとおりです。ユーザーがサイズ変更可能な div をクリックし、それをドラッグして小さく/大きくしようとすると、マウスが「いいえ」アイコンになり、透明なバージョンの div があります。マウスでドラッグします。

おそらく、これは私のコードをチェックアウトすることでよりよく説明されます:.

$(document).ready(function() {
var i = 0;
   $('#dragbar').mousedown(function(){
        $('#mousestatus').html("mousedown" + i++);
       $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });
});

および HTML:

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar">
    </div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

基本的なレイアウトが機能している一時的な Web ページを次に示します。

http://pastehtml.com/view/1crj2lj.html

茶色のバーを使用して「サイドバー」というラベルの付いたもののサイズを変更しようとすると、問題が発生することがあります。

4

2 に答える 2

22

http://www.jsfiddle.net/gaby/Bek9L/を見てください

#main面積をleft:200px（幅なし）に変更しました。テキストの選択が発生しないように、マウスダウンに
追加されました。 コードでは、両側が移動するように、のプロパティも変更します。e.preventDefault()
left#main

問題が実際に何であるかはわかりませんが、#sidebarサイズが変更されたが、その下に移動し#mainていたため、#dragbar消えたことがわかります。

于 2011-01-12T20:14:29.203 に答える
0

を使用しevent.preventDefaultます。

$('#dragbar').mousedown(function(e){
   e.preventDefault();
   // ...
});

多分あなたもそれを呼び出す必要がありmousemoveます。

于 2011-01-12T20:04:12.730 に答える