滑动干扰拖动

我使用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/。
任何想法如何锁定滑块，直到文本拖动结束？

来源

2012-11-20 Naor

这个问题的解决方法是锁定，并在鼠标按下unloack滑块和MouseUp事件：

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

这里的jsfiddle：http://jsfiddle.net/Uy4Gp/2/

来源

2012-11-20 12:09:16 Naor

滑动干扰拖动

回答

相关问题