Question

我遇到了jQuery UI draggable的问题..

我可以在较小的父元素中滚动元素，以便创建一种视口。

但是，我在拖动元素时遇到了问题，因为它正在捕捉到端口的边缘。

现在正在与此争斗一段时间，所以真的可以使用一些帮助......请：）

以下是我想要获得的行为示例：LINK

这是一个jsFiddle：LINK

和示例代码：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<!-- CSS -->
<style type="text/css">
#port{
 width:50px; 
 height:100px;
 border:1px solid red;
 overflow:hidden;
}

#obj {
 width: 100px;
 height: 100px;
 border: 1px solid black;
 cursor: pointer;
 border-radius: 10px;
 text-align: center;
 background-color: lightpink;
}
</style>

<!-- Javascript -->
<script>
$(function () 
{
 $("#obj").draggable(
 {
  containment: "#port",
  scroll: false,
  axis: 'x'
 });
});
</script>

<!-- HTML -->
<div id="port">
 <div id="obj">
  <p>Drag me</p>
 </div>
</div>

Answer 1

这是解决方案。

<div id="port">
     <div id="obj">
      <p>This is my new paragraph</p>
     </div>
</div>

$(function() {
$( "#obj" ).draggable();
});

链接：http://jsfiddle.net/3HVT5/

当您删除原始代码中的containment: "#port"行时，它会正常工作。

Answer 2

<强> DEMO

希望这是您所需要的，因为您指定了axis:x，它只会在x轴上移动

$(function () {
    $("#obj").draggable({

        scroll: false,
        axis: 'x',

    });
});

Answer 3

<强> DEMO

我想这就是你需要的东西

 $(function () {
    $("#obj").draggable({
        containment: 'parent',

        axis: 'x',
        drag: function (event, ui) {
            var p = ui.helper.position();
            $(this).stop().animate({
                right: p.right,
                left: p.left
            }, 400, 'linear');
        }

    });
});

Answer 4

找到'a'解决方案here，但不确定它的优雅......

<div id="outer"> <!-- position: relative -->
    <div id="inner"> <!-- position: absolute -->   
        <img id="img_1" src="http://media02.hongkiat.com/nature-photography/red-planet.jpg" width="300" height="100" />
    </div>
</div>


$(function() 
{
    var img = $("#img_1").draggable(
        { 
            containment: '#inner',
            axis: 'x'
        }),
    h = img.height(),
    w = img.width(),
    outer = $('#outer'),
    oH = outer.height(),
    oW = outer.width(),
    iH = h + (h - oH),
    iW = w + (w - oW),
    iT = '-' + ((iH - oH)/2) + 'px',
    iL = '-' + ((iW - oW)/2) + 'px';

    $('#inner').css({ width: iW, height: iH, top: iT, left: iL });    
})

然而，尝试了它，它完全符合我的要求。所以，如果没有更好的表现，我会坚持下去。这是一个fiddle link让你们尝试一下。

感谢您的帮助......

平滑滚动UI可拖动

4 个答案: