@zonda/jquery-ui-snap-reference-line NPM

Jquery UI 拖拽缩放增强

加入对齐参考线

使用

引入js

    // 必须在Jquery UI 之后引用
    <script src="../dist/jquery-ui-snap-ref-line.js"></script>

    $('.box').draggable({
        snapRef: true, // 开启参考线
        snapRefLineColor: 'green', //参考线颜色
        snapRefTolerance: 30, // 参考线的出现距离
        snapTolerance: 20, // 吸附距离
        stop: function (event, ui) {
            console.log(ui);
        }
    });
    $('.box').resizable({
        handles: 'all',
        snapRef: true, // 开启参考线
        snapRefTolerance: 30, // 参考线的出现距离
        snapTolerance: 20, // 吸附距离
        stop: function(event, ui) {
            console.log(ui);
        }
    });