4

jsfiddleの例

要素をドラッグしたとき#rightに、その親のサイズを変更したいと思います。私の例は正しく機能せず、その理由を理解できていません。それを修正する方法のヒントはありますか？

念のため、ここで私がやろうとしているのは、これに似たサイズ変更可能なスクロールを作成することです。しかし今のところ、私は正しい要素にのみ興味があります。

4

3 に答える 3

3

最も簡単な解決策は次のとおりです（SCSSの#leftと#rightの変更に注意してください）。

SCSS：

#container {
    width: 500px;
    height: 100px;
    background: #f9f9f9;
}

#nav {
    width: 100px;
    height: 100px;
    background: #e9e9e9;
    cursor: move;
}
#left {
    width: 10px;
    height: 100px;
    position: absolute;
    top:0;
    left:0px;
    background: #a9a9a9;
    cursor: w-resize;
    &:hover {
        background: #999;
    }
}
#right {
    width: 10px;
    height: 100px;
    position:absolute;
    top:0;
    right:0px;
    background: #a9a9a9;
    cursor: e-resize;
    &:hover {
        background: #999;
    }
}

JavaScript：

var cont = $("#container")
var nav = $("#nav")
var left = $("#left")
var right = $("#right")

nav.draggable({
    containment: cont
});

right.draggable({
    containment: cont,
    drag: function(e, ui) {
        nav.width(ui.position.left);
    }
});

唯一の問題は、JavaScriptに夢中になっていることでした。ui.position.leftには、必要なすべての情報が含まれていました。私がしたのは、コンテンツをフローティングからposition：absoluteに変更することだけでした。

于 2013-03-26T19:25:51.223 に答える
2

古き良き純粋なJavaScriptを使用して、それを行うことができます
http://jsfiddle.net/DerekL/cCvGD/

var oriX = 0,
    oriW = 0,
    mousedown = false;
right.mousedown(function (e) {
    oriX = $(this).offset().left;             //store the initial x and width
    oriW = nav.width();
    mousedown = true;                         //mousedown sets to true
    e.stopPropagation();                      //prevent nav from being dragged
})
$(window).mousemove(function (e) {
    if(mousedown == true) {                   //only when mouse is down (dragging)
        nav.width(oriW + (e.clientX - oriX)); //calculate the width
    }
}).mouseup(function () {
    mousedown = false;                        //mousedown sets to false
});

左と右の両方：http：//jsfiddle.net/DerekL/cCvGD/1/

于 2013-03-26T19:07:52.983 に答える
1

問題は、ナビゲーションコンテナの幅を変更していて、これが正しい要素から移動していることです。したがって、ドラッグしている間、2倍の距離まで移動します。

ドラッグ可能な方法で正しい要素の位置をリセットすることで、これを回避できます

right.draggable({
    containment: cont,
    drag: function(e, ui){
        dragged = ui.position.left;
        nav.width(originNavWidth + dragged);
        ui.position.left = nav.position.left;
    }
})

参照： http： //jsfiddle.net/vf4eS

于 2013-03-26T19:11:32.493 に答える