Question

I am using iosSlider plugin in order to aloow the user slide between element.
I also want to put a draggable text over each slide. For that I am using jquery UI (only the draggable package).
The problem is that while I drag the text, the slider starts and interfere the dragging. Is there any why I can disable the sliding when dragging?

Here is jsfiddle: http://jsfiddle.net/Uy4Gp/
HTML Code:

<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 Code:

    $(document).ready(function() {

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

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

CSS Code:

.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;
}

Update:
I tries to add event on the draggable elements: when the dragging starts -> disable the slider and when the dragging ends -> enable the slider:

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

I starts to look normal but when dragging the text and leaving the mouse click, the slider begin to move. Here is an example: http://jsfiddle.net/Uy4Gp/1/.
Any idea of how to lock the slider until the END of the text dragging?

Answer 1

The solution to this problem is to lock and unloack the slider at the mousedown and mouseup events:

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

Here is jsfiddle: http://jsfiddle.net/Uy4Gp/2/