jssor：滑块随可拖动图像移动

Question

我已经在滑块容器中实现了可拖动图像，效果很好，现在拖动滑块也开始移动，我实际上想冻结它，只要我四处拖动一些东西，在放下时我想绑定水平再次拖动滑动

如何操作？

更新：

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();

但这似乎暂时对可拖动对象没有任何影响

Answer 1

当在滑块中的任何元素上检测到 'mousedown'（或相关）事件时，它将开始拖动。

如果您不希望检测到元素上的 'mousedown'（或相关）事件，请停止来自 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>

顺便说一句，请使用最新版本的 Jssor Slider

jQuery 方式

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

编辑：

我刚刚更新了包，你可以通过简单的方式完成这项工作。

要防止滑块中某个元素出现 drag/swipe，请将 nodrag 属性分配给该元素及其所有子元素。当 jssor 滑块检测到 'nodrag' 元素上的拖动时，它不会滑动。

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

jssor：滑块随可拖动图像移动

jssor: Sliders move with draggable image

jquery

jssor