0

要素間のユーザー スライドを許可するために、iosSliderプラグインを使用しています。
また、各スライドにドラッグ可能なテキストを配置したいと考えています。そのために、jquery UI (ドラッグ可能なパッケージのみ) を使用しています。
問題は、テキストをドラッグしているときに、スライダーが開始され、ドラッグが妨げられることです。ドラッグ時にスライドを無効にできる理由はありますか?

ここに jsfiddle があります: http://jsfiddle.net/Uy4Gp/
HTML コード:

<div class="iosSlider">
    <div class="slider">
        <div style="background-color: green;" class="item">
            <div class="drag">text1</div>
        </div>

        <div style="background-color: yellow;" class="item">
            <div class="drag">text2</div>
        </div>

        <div style="background-color: red;" class="item">
            <div class="drag">text3</div>
        </div>

        <div style="background-color: blue;" class="item">
            <div class="drag">text4</div>
        </div>
    </div>
</div>

JavaScript コード:

    $(document).ready(function() {

        $( ".drag" ).draggable({ containment: "parent" });

        $('.iosSlider').iosSlider({
            desktopClickDrag: true,
            snapToChildren: true
        });
    });

CSS コード:

.iosSlider {
  width: 400px;
  height: 100px;
}
.iosSlider .slider {
  width: 100%;
  height: 100%;
}
.iosSlider .slider .item {
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  height: 100px;
  background: #fff;
  margin: 0 0 0 0;
}

更新:
ドラッグ可能な要素にイベントを追加しようとしています: ドラッグの開始時 -> スライダーを無効にし、ドラッグの終了時 -> スライダーを有効にします:

$( ".drag" ).draggable({
    containment: "parent",
    start: function(event, ui) { $('.iosSlider').iosSlider('lock'); },
    stop: function(event, ui) { $('.iosSlider').iosSlider('unlock'); }
});

私は正常に見え始めますが、テキストをドラッグしてマウスをクリックしたままにすると、スライダーが動き始めます。例を次に示します: http://jsfiddle.net/Uy4Gp/1/。
テキストのドラッグが終了するまでスライダーをロックする方法はありますか?

4

1 に答える 1

0

この問題の解決策は、mousedown および mouseup イベントでスライダーをロックおよびロック解除することです。

$( ".drag" )
    .mousedown(function(event) { $('.iosSlider').iosSlider('lock');})
    .mouseup(function(event) { $('.iosSlider').iosSlider('unlock');});

ここに jsfiddle があります: http://jsfiddle.net/Uy4Gp/2/

于 2012-11-20T12:09:16.507 に答える