$(function() { var stopFromTop = 58; var stopToTop = 158; var i = 0; $("#handle").draggable({ axis: 'y', start:"> $(function() { var stopFromTop = 58; var stopToTop = 158; var i = 0; $("#handle").draggable({ axis: 'y', start:"> $(function() { var stopFromTop = 58; var stopToTop = 158; var i = 0; $("#handle").draggable({ axis: 'y', start:" />

JQuery Draggableは私が欲しいやり方では働かない

私は2つの水平分割を持っているので、高さを動的に調整できるように、その間にスライダーを挿入したい。コードは以下を使用しています:

<script type="text/javascript">
$(function() {
var stopFromTop = 58;
var stopToTop = 158;
var i = 0;
$("#handle").draggable({ axis: 'y', 
        start: function(event, ui) {
            TopStart = $('#top').height();
            BottomStart = $('#bottom').height();
        },
        drag: function(event, ui) {
            $('#top').height( TopStart + (ui.position.top-ui.originalPosition.top) );
            $('#bottom').height( BottomStart - (ui.position.top-ui.originalPosition.top) );
            //$("#handle").css({"top":108 + "px" }).show();
            //alert(ui.position.top);
        },
        containment: [0,stopFromTop ,0,stopToTop ]

});

});
</script>

しかし、これは、それがすべき方法では機能していません。マウスをドラッグしても、スライダはマウスをたどっていません。私が間違っていることがなければなりません。それを得ることができません! :( ページへのリンクがあります。

1
ページへのリンク、または jsfiddle の作成を心配していませんか?
追加された 著者 Tomas,

2 答え

jQuery UIのドラッグ可能な要素を使用できます。次に、頂点からのオフセットを計算し、それを一番上のdivの高さとして設定します。次に、下のdivの高さを見つけるためにいくつかの数学を行います。

編集

スライダの位置を relative に設定すると、基本的には上部divのすぐ下に表示されます。さらに、 top の値も変更します(基本的にはTWICEを必要なだけ動かしています)。どちらか:

  1. Set the sliders position to absolute (and play with top to position it right); <-- ALOT OF WORK, DO NOT ATTEMPT

  2. Simply stop changing slider's top value

1
追加された
私の編集を参照....
追加された 著者 Tomas,
数学はうまくいきます。それに応じて上下のdivの高さが変化します。例を確認してください。セパレータがマウスに追従していないことだけです。セパレータは突然動いています。
追加された 著者 Ansh,

jqueryにはCSSの問題があるようです。セパレータのcssプロパティをposition:absoluteに変更すると問題が解決しました。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript