0

[x1,y1,x2,y2] 形式を使用している場合、jqueryUI のドラッグ可能な関数の包含値の設定に問題があります。ここにjsがあります：

<script type="text/javascript">
    //slideTest.js
    $(document).ready(function(){
        $('.slideMin').each(function(){
            $(this).draggable({
                containment: [$(this).parent().offset().left,$(this).parent().offset().top,$(this).next('div').offset().left,$(this).parent().offset().top]
            });
        });
</script>

そして、スクリプトがやり取りしているhtml：

<div class="slideBar">
    <div class="slideMin"></div>
    <div class="slideMax"></div>
</div>

次の div、この場合は (slideMax) の offset().left に基づいて (slideMin div の) ドラッグ コンテインメントを設定しようとしています。

つまり、次の (slideMax) div の左に達したときに (slideMin div の) ドラッグ可能な動作を停止する必要があります。

ドラッグが定義された位置で停止しているため、x1 は機能しているように見えますが、重なり合って次の div を超えて拡張しているため、発生したくありません。x2 値の設定方法に何か問題があるに違いありませんが、それが何であるかはわかりません。

何かアドバイス？

4

1 に答える 1

0

考え出した...私は2つのdivを持っていて、両方ともドラッグ可能でした。最初の div は、次の div に到達したときに停止することになっていました。上記のコードは、いずれかの div をドラッグするまでこれを達成しました。いずれかの div をドラッグすると、他の div のドラッグ可能な範囲が更新されなかったため、ドラッグ可能な範囲が他の div と重なっているというエラーを受け取りました。それを修正するには、移動中の div のドラッグ可能な関数内で、他の div のドラッグ可能な範囲を再度開始して設定する必要がありました。

新しいコードは次のようになります。

$(this).draggable({
    containment: [$(this).position().left, $(this).position().top, $(this).next().position().left - $(this).width()+4, $(this).position().top],
    drag: function(e){
        $(this).next().draggable({
            containment: [parseFloat($(this).position().left) + parseFloat($(this).width())-4, $(this).next().position().top, parseFloat($(this).parent().position().left) + parseFloat($(this).parent().width())-3, $(this).next().position().top]
        });
    }
});
$(this).draggable({
    containment: [parseFloat($(this).prev().position().left) + parseFloat($(this).prev().width())-4, $(this).position().top, $(this).position().left, $(this).position().top],
    drag: function(e){
        $(this).prev().draggable({
            containment: [$(this).parent().offset().left-$(this).prev().width()+5, $(this).prev().position().top, $(this).position().left - $(this).prev().width()+4, $(this).prev().position().top]
        });
    }
});

PS、数字 -3 -4 +5 などは、ドラッグ可能な div (4px ハンドル) のハンドルに間隔を追加することでした。ハンドルがない場合は、余分な -3 -4 +5 部分は必要ありません。コードの。

于 2012-12-03T19:46:42.127 に答える