1

そのタイトルは紛らわしいですか？どうでもいいと思った。

私がページをクリックしたときに、少し長めに短くしたり、長くしたりできるようにしたい.

ここで私が何を意味するかを見ることができます：

http://jsfiddle.net/shawn31313/HKLhE/9/show/

マウスダウンを行うと、彼らはあなたの動きを右に動かします。それは正常に動作します。しかしここで、マウスを左に動かしてください。問題が見えますか？右にドラッグしたときと同じ方向に移動します。これは、幅を使用していて、明らかに幅が一方向に進んでいるためです。

これまでの私のコードは次のとおりです。

$(document).ready(function() {
    var dragStatus = 0,
        getPos, giveRandomID;
    $(document).mousedown(function(event) {
        dragStatus = 0;
        getPos = {
            top: event.clientY,
            left: event.clientX
        };
        giveRandomID = Math.floor(Math.random() * 99999);
    });
    $(document).mousemove(function() {
        var line = $('#line' + giveRandomID);
        if (dragStatus == 0) {
            $('body').append("<div id='line" + giveRandomID + "' class='line' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
            dragStatus = 1;
        }
        if (dragStatus == 1) {
            if (event.clientX > line.offset().left) {
                line.css({
                    width: event.clientX - line.offset().left
                });
            } else {
                line.css({
                    width: line.offset().left - event.clientX
                });
            }
            //for DEG  "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
        }
    });
    $(document).mouseup(function() {
        dragStatus = 2;
    });
});​

誰かがこれで私を助けてくれることを願っています。たぶん、これを設定するための完全に異なる方法です。この問題を解決するための何か

4

2 に答える 2

2

left線を左に伸ばすには、プロパティを更新する必要があります。

        if (event.clientX > getPos.left) {
            line.css({
                left: getPos.left,
                width: event.clientX - getPos.left
            });
        } else {
            line.css({
                left: event.clientX,
                width: getPos.left - event.clientX
            });
        }

jsFiddle: http://jsfiddle.net/HKLhE/16/

于 2012-06-21T00:29:48.160 に答える
1

プロパティを最初のマウス クリックの X 位置elseに設定するには、大文字と小文字を変更 (右に移動) する必要があります。その値が変化しているため、左に移動したときと比較することはできません。leftautorightoffset().left

サイズについてこれを試してください：

http://jsfiddle.net/HKLhE/20/

編集：Brilliandのソリューションははるかにエレガントです。

于 2012-06-21T00:34:31.530 に答える