3

私はこれを達成するのに苦労してきました！余分な依存関係は必要ないため、ドラッグ可能なUIを使用しません。私が試したことは何でもここにあります：http：//jsfiddle.net/wSTcJ/

<div id="cont">
    <div id="test">

    </div>
    <div id="test2">

    </div>
    <div id="drag">

    </div>
</div>

そして、jQueryコードはフィドルにあります。

最初のdivは2番目の下にあります。2番目の幅は0に保たれているので、ドラッグバーをドラッグするときに、このdivの幅を調整して、その内容を表示し、最初のdivの内容とオーバーラップさせます。私のコードではドラッグできますが、しばらくすると停止し、右から左にドラッグしません。

それを機能させるためのアイデアはありますか？

4

2 に答える 2

9

http://jsfiddle.net/wSTcJ/2/

垂直方向のサイズ変更には別のバーが必要だと思います。

私が行った変更のいくつかのメモ：

  • mousemovemouseup通常、親要素にバインドする必要がありますdocument。JavaScript にはキャプチャ マウス (WPF の CaptureMouse() など) がありません。つまり、ユーザーがマウスをあまりにも速く動かして要素から離れた場合、マウス イベントはイベント ハンドラによってキャプチャされなくなります。をバインドするdocumentことで、ページ内のマウス イベントが常にキャプチャされるようになります。
  • でドラッグ可能なオブジェクトへの参照を作成すると、mousedown正気を保つのに役立ちます。
  • 要素のサイズを変更する場合は、要素も変更する必要がありますwidth。
  • 追加されたバインディングをアンバインドしないmouseupと、mousemoveそれらが複数回追加され、後で何度も起動する可能性があります。
  • ユーザーがドラッグしていないときはイベントがまったく存在しないdrag = trueため、実際には必要ありません。mousemove
  • 背景がサイズ変更された後も要素を塗りつぶし続けるために、CSS でそれを 100% に変更しwidthましheightた。

ほとんどのドラッグ可能な div には、相対的ではなく絶対的な位置が指定されます。これを変更するには、コードにもいくつかの変更が必要です。

于 2012-12-22T12:28:02.400 に答える
0

私はあなたのコードを採用し、このように解決しました：http://jsfiddle.net/bukart/wSTcJ/1/

メソッドのロジックと使用法に問題がありました。

$( function() {

    $( '#drag' ).each( function() {

        var $drag = $( this );


        $drag.parent().css( {
            'margin-left'      : $drag.parent().offset().left + 'px'
        } );

        $drag.on( 'mousedown', function( ev ) {
            var $this = $( this );
            var $parent = $this.parent();
            var poffs = $parent.position();
            var pwidth = $parent.width();

            var x = ev.pageX;
            var y = ev.pageY;

            $this.parent();

            $( document ).on( 'mousemove.dragging', function( ev ) {
                var mx = ev.pageX;
                var my = ev.pageY;

                var rx = mx - x;
                var ry = my - y;

                $parent.css( {
                    'left'       : (poffs.left + rx) + 'px',
                    'width'      : (pwidth - rx) + 'px'
                } );


            } ).on( 'mouseup.dragging mouseleave.draggign', function( ev) {
                $( document ).off( '.dragging' );
            } );


        } );

    } );

} );

​
于 2012-12-22T12:22:38.573 に答える