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 回答