Question

我有一个对象，我想改变你点击它并向右或向左拖动的宽度。移动鼠标（或手指）时增加宽度或远离它。

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

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

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

</script>

Answer 1

您要做的是跟踪鼠标的x co-ords。如果比以前更大，增加尺寸，如果更低，则减小尺寸。

未经测试，但下面应该是灵感。

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;
})

Answer 2

您只需要resizable({})效果。

$('#changeMe').resizable({});

你可以看一下这篇文章

Resizable

Answer 3

 $(function() {
     $('.testSubject').resizable();
 });

或

#changeMe {width:300px; height: 200px; border: 1px solid black;}

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

  $('#changeMe').resizable({});

或者

 $(function(){

            $('img[src*=small]').toggle(
                function() {
                  $(this).attr('src',
                    $(this).attr('src').replace(/small/,'medium'));
                },
                function() {
                  $(this).attr('src',
                    $(this).attr('src').replace(/medium/,'large'));
                },
                function() {
                  $(this).attr('src',
                    $(this).attr('src').replace(/large/,'small'));
                }
            );

          });

Answer 4

如果我正确理解你的问题，你希望能够在沿着x轴移动时动态增加/减小对象的大小，我建议你使用$（'＃changeMe'）。{{ 3}}在jQuery UI offset()事件中。

您可以根据初始偏移量创建要使用的公式，并使用$（'＃changeMe'）创建容器大小的新偏移量.css（{width：X，height：Y}）;,并插入X和Y值的任何值。

使用代码编辑进一步阐述：

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 });
    }
});

如果您使用它作为基础，那么它对您的应用程序来说是一个非常好的简单解决方案。

如何创建单击并拖动以使用jQuery更改对象的宽度？

4 个答案: