Javascript 滑动干涉拖动
我使用插件是为了让用户在元素之间滑动。Javascript 滑动干涉拖动,javascript,css,Javascript,Css,我使用插件是为了让用户在元素之间滑动。 我还想在每张幻灯片上放一个可拖动的文本。为此,我使用jquery UI(仅可拖动的包)。 问题是,当我拖动文本时,滑块会启动并干扰拖动。有什么原因我可以禁用拖动时的滑动 这里是JSFIDLE: HTML代码: <div class="iosSlider"> <div class="slider"> <div style="background-color: green;" class="item">
我还想在每张幻灯片上放一个可拖动的文本。为此,我使用jquery UI(仅可拖动的包)。
问题是,当我拖动文本时,滑块会启动并干扰拖动。有什么原因我可以禁用拖动时的滑动 这里是JSFIDLE:
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>
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'); }
});
我开始看起来很正常,但当拖动文本并保持鼠标单击时,滑块开始移动。下面是一个例子:。知道如何锁定滑块直到文本拖动结束吗?此问题的解决方案是在mousedown和mouseup事件中锁定和解锁滑块:
$( ".drag" )
.mousedown(function(event) { $('.iosSlider').iosSlider('lock');})
.mouseup(function(event) { $('.iosSlider').iosSlider('unlock');});
以下是JSFIDLE:
$( ".drag" )
.mousedown(function(event) { $('.iosSlider').iosSlider('lock');})
.mouseup(function(event) { $('.iosSlider').iosSlider('unlock');});