☰

DIV の片側だけをドラッグしてサイズを変更するにはどうすればいいですか? 質問する

tag-icon • tag-icon jquery html
DIV の片側だけをドラッグしてサイズを変更するにはどうすればいいですか? 質問する

もっと具体的に言うと、ドラッグ中に DIV のサイズを変更したくありません。ドラッグして (そしておそらく垂直線がカーソルに追従して)、放すと div のサイズが変更されます。

ベストアンサー1

この例を見てください

HTML

<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
</div>
<div id="main">
    main
</div>

jQueryの

var dragging = false;
$('#dragbar').mousedown(function(e){
   e.preventDefault();

   dragging = true;
   var main = $('#main');
   var ghostbar = $('<div>',
                    {id:'ghostbar',
                     css: {
                            height: main.outerHeight(),
                            top: main.offset().top,
                            left: main.offset().left
                           }
                    }).appendTo('body');

    $(document).mousemove(function(e){
      ghostbar.css("left",e.pageX+2);
   });
});

$(document).mouseup(function(e){
   if (dragging) 
   {
       $('#sidebar').css("width",e.pageX+2);
       $('#main').css("left",e.pageX+2);
       $('#ghostbar').remove();
       $(document).unbind('mousemove');
       dragging = false;
   }
 });

デモhttp://jsfiddle.net/gaby/Bek9L/1779/

これは私が投稿したコードからの変更ですjQuery UI を使用せずに、jQuery を使用して div でフレームのサイズ変更動作をエミュレートしますか?

おすすめ記事