Question

我在容器中有一个可拖动的元素，我需要该元素始终可见;

元素的宽度和高度高于容器w / h

如果left值低于-2000px，我需要它保持在-2000px

<style>
    #draggable {
        width: 3000px;
        height: 2100px;
    }
</style>

<script>
    $(function() {
        $("#draggable").draggable();
        $("#draggable").on('change', function(e) {
            var left = $('@draggable').css('left');
            left = left.replace ( /[^\d.]/g, '' );
            console.log(left);
            if (left < -2000) {
                $('#draggable').css('left', '-2000px');
            }
        }
        );
    });
</script>

<div style="position:relative; width:1000px; height:700px; background:#ff0000; margin:0 auto; overflow: hidden;">

    <div id="draggable" class="ui-widget-content" style="position:relative; width:3000px; height:2100px; overflow: hidden; left:0px; top:0px;">

content goes here

    </div>

</div>

Answer 1

您的代码存在两个问题。

第一个问题是您没有正在侦听正确的jQuery事件。您应该在on('change'..)调用中定义stop:处理程序，而不是收听.draggable()。

第二个问题是，您的replace语句也会从像素数中删除减号。 parseInt方法可以使用。

修复这两个问题，您的代码应如下所示：

$(function() {
    $("#draggable").draggable({
        stop: function() {
            var left = $('#draggable').css('left');
            left = parseInt(left, 10);
            console.log(left);
            if (left < -2000) {
                $('#draggable').css('left', '-2000px');
            }
        }
    });
});

这是我用来测试这段代码的小提琴： http://jsfiddle.net/a9pp7hpk/

Answer 2

问题是您是否尝试将字符串值与IF语句中的整数值进行比较？检查＆＃39; left＆＃39;的类型用：

console.log(typeof left)

您有以下修改左侧变量的行，但它仍然是字符串类型：

left = left.replace ( /[^\d.]/g, '' );

将其更改为将其转换为等效的整数：

left = parseInt(left.replace ( /[^\d.]/g, '' ));

javascript中的replace（）函数搜索指定子字符串的字符串值，并将其替换为其他内容，将其保留为字符串值，而不是整数，即所需。

如何操作DOM中可拖动元素的css属性

2 个答案: