0

jQuery UI のドラッグ可能に問題があります。

小さい親要素内の要素をスクロールして、一種のビューポートを作成する必要があります。

ただし、要素がポートの端にスナップしているため、要素がドラッグされるという問題があります。

しばらくこれと戦っているので、本当に助けが必要です...お願いします:)

これが私が取得しようとしている動作の例です: 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>
4

4 に答える 4

0

デモ

を指定したため、これが必要なものであることを願っていますaxis:x。x軸でのみ移動します

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

        scroll: false,
        axis: 'x',

    });
});
于 2013-08-28T09:59:30.030 に答える
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

デモ

私はこれがあなたが必要とするものだと思います

 $(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 に答える