2

私は試験サイトを作成しています。jQuery 用の html を準備しました。ユーザーがテーブルの境界線にマウスを置いてドラッグすると、テーブルの幅を変更できるようにしたいと考えています。一部の回答はデフォルトの場所よりも長くなる可能性があるためです。

どの API を使用すればよいですか? 私はドラッグ（）APIを使用する必要があると思いますが、他に何が必要ですか？

皆さんも私にいくつかの例を提供していただければ、私も感謝します:)

4

2 に答える 2

1

作業デモ http://jsfiddle.net/YfnjA/

それが役に立てば幸い。

クリックしてドラッグすると、サイズを変更したり、休憩したりして、今すぐ試してみることができます:)

コード

$(function() {
    var pressed;
    var start;
    var startX;
    var startWidth;
    var wrapper = $("div#wrapper");
    var container = $("table#container");

    $("table th").mousedown(function(e) {
        start = $(this);
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        pressed = true;
    });

    $(document).mousemove(function(e) {
        if(pressed) {
            var newWidth = startWidth + (e.pageX - startX);
            start.width(newWidth);
            wrapper.width(container.width() + 10);
        }
    });

    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});​
于 2012-06-08T10:28:55.093 に答える
1

いくつかのヒント:

$(selector).width();

$(selector).mousedown(function(){});

$(selector).mouseup(function(){});
于 2012-06-08T09:36:47.733 に答える