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

当一个＆＃39; mousedown＆＃39;在滑块中的任何元素上检测到（或相关的）事件。

如果你不想要＆＃39; mousedown＆＃39;要检测到的元素上的（或相关的）事件，请阻止事件冒泡/传播。

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

修改

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

要防止滑块中某个元素的拖动/滑动，请将nodrag属性指定给元素及其所有子元素。当jssor滑块检测到'nodrag＆＃39;元素，它不会刷卡。

<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：滑块随着可拖动的图像移动

1 个答案: