jssor: Sliders move with draggable image

I have implemented in the slider container draggable images, which works good, now on drag the slider also starts to move which I actually want to freeze as long I am dragging something around and on drop I want to bind the horizontal drag sliding again.

How to do this?

UPDATE:

var $headerimage = $("<img>", {
            src: "data:" + json.type + ";base64," + json._byte,
            title: json.name
            //width: 40
        }).attr("nodrag", "true").bind('click', function (e) {
            clicks++;  //count clicks
            if (clicks === 1) {
                timer = setTimeout(function () {
                    clicks = 0;
                    iGenerateMedia(json, service, structure, id, jsp, items);
                }, DELAY);
            } else {
                clearTimeout(timer); 
                clicks = 0;
                var $parent = div.parent().attr("id");
                var p = $(div).position();
                var left = p.left;
                var top = p.top;
                $(div).attr("nodrag", "true").draggable();

But this not seems to have any effect on the draggable object for now

Solution

It will start drag when a 'mousedown' (or relevant) event is detected on any element in the slider.

If you don't want the 'mousedown' (or relevant) event on your element to be detected, please stop the event from bubbling/propagation.

<script>
    jQuery(document).ready(function ($) {
        //'mousedown' event name is different on various devices, use '$Jssor$.$Device().$Evt_Down' instead then.
        $Jssor$.$AddEvent("yourelement", $Jssor$.$Device().$Evt_Down, function (event) {
            //stop event from bubbling/propagation
            $Jssor$.$StopEvent(event);
        });
    });
</script>

<div u="slides" ...>
    ...
    <div>
        <img u="image" src="../img/landscape/01.jpg" />
        <div id="yourelement" style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; background-color: white;"></div>
    </div>
    ...
</div>

Btw, please use the latest version of Jssor Slider

jQuery way

<script>
    jQuery(document).ready(function ($) {
        $("#yourelement").mousedown(function (event) {
            //stop event from bubbling/propagation
            event.stopPropagation();
        });

        //for ie 10/11
        $("#yourelement").on("MSPointerDown", function (event) {
            //stop event from bubbling/propagation
            event.stopPropagation();
        });

        //for mobile device
        $("#yourelement").on("touchstart", function (event) {
            //stop event from bubbling/propagation
            event.stopPropagation();
        });
    });
</script>

Edit:

I have just updated the package, you can do this job in a simple way.

To prevent drag/swipe on a certain element in the slider, please just assign nodrag attribute to the element and its all child elements. When jssor slider detect drag on a 'nodrag' element, it won't swipe.

<div u="slides" ...>
    ...
    <div>
        <img u="image" src="../img/landscape/01.jpg" />
        <div nodrag="true" style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; background-color: white;"></div>
    </div>
    ...
</div>