0

我在使用 jQuery UI 可拖动时遇到问题。

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

但是，当元素捕捉到端口的边缘时，我遇到了拖动元素的问题。

已经为此奋斗了一段时间，所以真的可以使用一些帮助......请:)

这是我试图获得的行为示例：LINK

这是一个 jsFiddle：链接

和示例代码：

<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>
4

4 回答 4

0

这是解决方案。

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

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

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

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

于 2013-08-28T09:56:38.070 回答
0

演示

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

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

        scroll: false,
        axis: 'x',

    });
});
于 2013-08-28T09:59:30.030 回答
0

演示

我想这就是你需要的

 $(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');
        }

    });
});
于 2013-08-28T10:23:05.270 回答
0

在这里找到了“一个”解决方案，但不确定它是否优雅......

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

但是，尝试了一下，它完全符合我的要求。因此，如果没有更好的方法，我将继续这样做。这是一个小提琴链接供大家尝试。

谢谢你的帮助...

于 2013-08-29T09:17:22.430 回答