toly插件02之Jquery拖动插件--toly-drag

0.效果

1.使用

1-1.引用:jquery.js和插件文件dragHelper.js

<!--jquery.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="plugs/toly-drag/dragHelper.js"></script>

1-2.使用：只要在要拖拽的元素上添加属性：toly-plug=”drag-helper”即可如：

<div class="dragHelper" toly-plug="drag-helper"></div>
[注]拖拽的元素必须是非static的定义方式

1-3.html的结构：body标签下

<img src="bg.jpg" toly-plug="drag-helper">
<img src="bg.jpg" toly-plug="drag-helper">
<img src="bg.jpg" toly-plug="drag-helper">
<div class="dragHelper" toly-plug="drag-helper">dragHelper</div>

1-4.html的css样式

    .dragHelper {
        width: 300px;
        height: 300px;
        background: aqua;
        position: relative;
    }

    img {
        width: 300px;
        position: fixed ;
    }

源码详见：
link：https://github.com/toly1994328/toly-drager.git

到这就能实现上面的效果了。额外说一下，一个可选配置

toly-center=”yes”可使指定元素一开始居中于可视窗口。

<img src="bg.jpg" toly-plug="drag-helper" toly-center="yes">

插件源码：dragHelper.js

var $target = $('[toly-plug="drag-helper"]');

isCenter();

function isCenter() {
    var $center = $('[toly-center="yes"]');
    if ( $center) {
        autoCenter($center);
console.log("{}--{"+"}");
        var timer = null;
        $(window).resize(function () {
            window.clearTimeout(timer);
            timer = window.setTimeout(function () {
                fillWindow($('body'))
                autoCenter($center)
            }, 50);
        });
    }
}


//自动居中
function autoCenter($el) {
    var innerWidth = window.innerWidth;
    var innerHeight = window.innerHeight;

    var elW = $el.innerWidth();
    var elH = $el.innerHeight();

    $el.css({
        left: (innerWidth - elW) / 2,
        top: (innerHeight - elH) / 2
    })
}

function fillWindow($el) {
    $el.css({
        width: window.innerWidth,
        height: window.innerHeight,
        top: 0,
        left: 0
    })
}

var mX = 0, mY = 0, isDrag = false;

//鼠标按下
$target.on('mousedown', function (e) {
    mX = e.pageX - $(e.target).offset().left;//鼠标按下点与元素最左边距离
    mY = e.pageY - $(e.target).offset().top;//鼠标按下点与元素最右边距离
    isDrag = true;
})

document.onmousemove = function (ev) {
    var moveX = 0, moveY = 0;
    if (isDrag) {
        moveX = ev.pageX - mX;
        moveY = ev.pageY - mY;

        var innerWidth = window.innerWidth;
        var innerHeight = window.innerHeight;
        var elW = $(ev.target).innerWidth();
        var elH = $(ev.target).innerHeight();

        var maxY = innerHeight - elH;
        var maxX = innerWidth - elW;

        moveX = Math.min(maxX, Math.max(0, moveX));
        moveY = Math.min(maxY, Math.max(0, moveY));

        $(ev.target).css({
            left: moveX,
            top: moveY
        })
    }
};

$('.link').click(function () {
    $('#mask').show();
    $target.show();
});


$('.toly-dialog-close').click(function () {
    console.log("{}--{" + "}");
    $target.fadeOut(100);
    $('#mask').fadeOut(100);
})

//鼠标松开
document.onmouseup = function (ev) {
    isDrag = false;
}