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;

如何使用draggable进行操作？

非常感谢你！

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);
        }                                                   
    }

Answer 2

jQuery UI文档中提供了几个约束移动示例：http://jqueryui.com/demos/draggable/constrain-movement.html

$(function() {
    $( "#draggable" ).draggable({ axis: "y" });
    $( "#draggable2" ).draggable({ axis: "x" });

    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
    $( "#draggable4" ).draggable({ containment: "#demo-frame" });
    $( "#draggable5" ).draggable({ containment: "parent" });
});

你可以包含'父级'，'文档'，'窗口'，[x1，y1，x2，y2]，元素或选择器的可拖动项。您还可以仅允许x或y轴移动。

jquery ui draggable约束ina轴x和给定坐标

2 个答案: