zoukankan      html  css  js  c++  java
  • toly插件02之Jquery拖动插件--toly-drag

    0.效果

    image

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

    源码详见:
    linkhttps://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({
             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;
    }
  • 相关阅读:
    BEC listen and translation exercise 44
    中译英12
    BEC listen and translation exercise 43
    中译英11
    BEC listen and translation exercise 42
    中译英10
    BEC listen and translation exercise 41
    中译英9
    BEC listen and translation exercise 40
    中译英8
  • 原文地址:https://www.cnblogs.com/toly-top/p/9782012.html
Copyright © 2011-2022 走看看