zoukankan      html  css  js  c++  java
  • jquery: 子元素在父元素范围内拖动

    html:

    <div class="sand-content fl">
                        <img src="images/sand_900x600c.jpg" alt="" id="sandPicture">
                    </div>

    css:

    .sand-content {
        position: relative;
        width: 600px;
        height: 400px;
        overflow: hidden;
        cursor: move;
        border: 1px solid #ddd;
    }
    
    .sand-content img {position: relative}

    js:

    <script>
            function justifyPicture(child) {
                let maxLeft = child.offsetParent().outerHeight() - child.outerHeight();
                let maxTop = child.offsetParent().outerWidth() - child.outerWidth();
                child.css({
                    left: maxLeft / 2 + 'px',
                    top: maxTop / 2 + 'px'
                })
            }
    
            function dragPicture(moveObj) {
                let maxLeft = moveObj.offsetParent().outerWidth() - moveObj.outerWidth();
                let maxTop = moveObj.offsetParent().outerHeight() - moveObj.outerHeight();
                moveObj.on('mousedown', event => {
                    let imgTop = parseFloat(moveObj.css('top'));
                    let imgLeft = parseFloat(moveObj.css('left'));
                    let lastPointX = event.clientX;
                    let lastPointY = event.clientY;
                    $(document).on('mousemove', e => {
                        e.preventDefault();
                        let changeX = e.clientX - lastPointX;
                        let changeY = e.clientY - lastPointY;
                        let disX = imgLeft + changeX;
                        let disY = imgTop + changeY;
                        moveObj.css({
                            left: Math.max(Math.min(disX, 0), maxLeft) + "px",
                            top: Math.max(Math.min(disY, 0), maxTop) + "px"
                        })
                    })
                });
                $(document).on('mouseup', () => {
                    $(document).off('mousemove');
                })
            }
    
            $(document).ready(function () {
                let child = $('#sandPicture');
                justifyPicture(child)
                dragPicture(child)
            })
        </script>
  • 相关阅读:
    Kaldi的data目录解析
    Kaldi的nnet3
    Kaldi中的Chain模型
    Karel版本的nnet1
    Dan版本的nnet2
    MFCC/Filter Bank的提取流程
    【算法专题】工欲善其事必先利其器—— C++ STL中vector(向量/不定长数组)的常用方法总结
    App 设计技巧
    js判断是否在微信浏览器中打开
    WebApi 跨域
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13144744.html
Copyright © 2011-2022 走看看