如何創建單擊並拖動以使用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