0

クリックして左右にドラッグしたときに幅を変更したいオブジェクトがあります。マウス (または指) を動かすと、幅が増えたり減ったりします。

<style>
    #changeMe {width:300px; height: 200px;}
</style>

<div id="changeMe">
    Some Content
</div>

<script>
    $('#changeMe').mousedown(function(){
        //Some Code?????
    });

</script>
4

4 に答える 4

1

やりたいことは、マウスの x 座標を追跡することです。以前よりも大きい場合はサイズを大きくし、小さい場合はサイズを小さくします。

テストされていませんが、以下はインスピレーションになるはずです。

var oldXPos = 0;
var isDragging = false;

$(document).mousemove(function(event) {
    if (isDragging)
    {
        var difference = event.pageX - oldXPos;
        // Do something with this value, will be an int related to how much it's moved
        // ie $('#changeMe').css.width += difference;
    }
    oldXPos = event.pageX;
});

$('#changeMe').mousedown(function() {
    isDragging = true;
})
$('#changeMe').mouseup(function() {
    isDragging = false;
})
于 2013-08-20T16:58:55.830 に答える
0

If I understand your question correctly, that you want to be able to dynamically increase/decrease the size of the object as it moves along the x-axis, I recommend that you use $('#changeMe').offset() inside the jQuery UI drag event.

You can create a formula that you want to use based on an initial offset, and the new offset to size your container by $('#changeMe').css({ width: X, height: Y });, and insert whatever your X and Y values are in pixels.

Edited for further elaboration with code:

var initX = 0;
var initW = 0;
$('#changeMe').draggable({
    start: function() {
        initX = $(this).offset().left;
        initW = $(this).width();
    },
    drag: function() {
        var deltaX = initX - $(this).offset().left;
        $(this).css({ width: initW + deltaX });
    }
});

If you used that as your base, it's a very nice and simple solution for your application.

于 2013-08-20T16:53:03.800 に答える