jquery ui 可拖动约束 ina 轴 x 和给定坐标

Question

我有

<style>
.container { position:relative; width:600px; height:400px; overflow:hidden; }

.div-inner { position:absolute; top:0px; left:0px; width:7200px; cursor:e-resize; }

</style>

$(".div-inner").draggable({ axis: "x"});

<div class="container">
     <div class="div-inner">Drag me!</div>
     </div>

我想限制 div 内部 7200 像素宽度的左右移动。

如果它是一个可滚动元素，我会让它从左边滚动:0px；向左:(7200-600)px；

我怎样才能用可拖动的方式做到这一点？

非常感谢!

Answer 1

我找到了一个解决方案:

 $(".div-inner").draggable({ axis: "x",

    stop: function(event, ui) {
        if(ui.position.left>0)
        {   
        //alert('Return back');
        $(".div-inner").animate({"left": "0px"}, 600);
        }
        else if(ui.position.left<-6800)
        {
            $(".div-inner").animate({"left": "-6400px"}, 600);
        }                                                   
    }