0

通常、プラグインは多くの不要な機能を追加し、プロジェクトのサイズを大きくするため、些細な問題に対して独自のソリューションを作成することを好みます。サイズによってページが遅くなり、1 日あたり 100,000 ページビューの Web サイトで 30,000 の違い (jquery ドラッグ可能と比較して) は、請求書に大きな違いをもたらします。私はすでにjqueryを使用していますが、今のところ必要なのはそれだけだと思います。別のプラグインやフレームワークを使用して物事をドラッグするように言わないでください.

それを念頭に置いて、ボックスをドラッグできるようにするために、次のコードを書きました。コードは問題なく動作します (コード自体に関するヒントは大歓迎です) が、ちょっとした不具合がありました。

ボックスをブラウザの右端限界までドラッグすると、水平スクロール バーが表示され、ボックスが原因でウィンドウの幅が大きくなります。望ましい動作は、水平スクロール バーを表示しないことですが、ウィンドウのウィンドウのように、ウィンドウ領域の外にボックスの一部を配置できるようにすることです。

任意のヒント？

CSS:

.draggable {
    position: absolute;
    cursor: move;
    border: 1px solid black;
}

Javascript:

$(document).ready(function() {
    var x = 0;
    var y = 0;
    $("#d").live("mousedown", function() {
        var element = $(this);
        $(document).mousemove(function(e) {
            var x_movement = 0;
            var y_movement = 0;
            if (x == e.pageX || x == 0) {
                x = e.pageX;
            } else {
                x_movement = e.pageX - x;
                x = e.pageX;
            }
            if (y == e.pageY || y == 0) {
                y = e.pageY;
            } else {
                y_movement = e.pageY - y;
                y = e.pageY;
            }
            var left = parseFloat(element.css("left")) + x_movement;
            element.css("left", left);
            var top = parseFloat(element.css("top")) + y_movement;
            element.css("top", top);
            return false;
        });
    });
    $(document).mouseup(function() {
        x = 0;
        y = 0;
        $(document).unbind("mousemove");
    });
});​

HTML:

<div id="d" style="width: 100px; left: 0px; height: 100px; top: 0px;" class="draggable">a</div>
4

2 に答える 2

3

簡単な解決策として、ドラッグ可能なオブジェクトのコンテナにCSSを追加するだけで、スクロールバーを防ぐことができます。

body { overflow: hidden; }

jsFiddle： http: //jsfiddle.net/F894P/

于 2012-06-13T16:19:32.870 に答える
1

これの代わりに ：

$("#d").live("mousedown", function () {
 // your code here
}); // live

これを試して ：

$("body").on("mousedown","#d", function(){
 // your code here
 $("#parent_container").css({"overflow-x":"hidden"});
 // or $("body").css({"overflow-x":"hidden"});
}); // on

#parent_containerドラッグ可能なオブジェクトはどこにありますか。

jQuery 1.7以降を使用する必要があります

jQuery 1.7 以降、この.live()メソッドは非推奨になりました。.on()イベント ハンドラーをアタッチするために使用します。古いバージョンの jQuery のユーザーは.delegate()、.live().

于 2012-06-13T16:32:51.317 に答える