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

Question

我有一个对象，当您单击它并向右或向左拖动时，我想更改其宽度。 在移动鼠标（或手指）时增加宽度或减小宽度。

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

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

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

</script>

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

Answer 2

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

$('#changeMe').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'）。 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 个解决方案

解决方案1
1 已采纳 2013-08-20 16:58:55

解决方案2
0 2013-08-20 16:45:35

解决方案3
0 2013-08-20 16:47:13

解决方案4
0 2013-08-20 16:53:03

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2013-08-20 16:58:55

解决方案2 0 2013-08-20 16:45:35

解决方案3 0 2013-08-20 16:47:13

解决方案4 0 2013-08-20 16:53:03

解决方案1
1 已采纳 2013-08-20 16:58:55

解决方案2
0 2013-08-20 16:45:35

解决方案3
0 2013-08-20 16:47:13

解决方案4
0 2013-08-20 16:53:03