• 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;
    }
  • 相关阅读:
    Python面向对象高级编程
    Python面向对象编程
    Anaconda的安装
    Python模块
    Python函数式编程
    Python高级特性
    hdu 3065 病毒侵袭持续中 ac自动机
    hdu 2896 病毒侵袭 ac自动机
    poj 3667 Hotel 线段树
    hdu 4322 Candy 费用流
  • 原文地址:https://www.cnblogs.com/toly-top/p/9782012.html
Copyright © 2020-2023  润新知