zoukankan      html  css  js  c++  java
  • div在一个区域拖动

    <script>
    
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            // var oParent = document.getElementById('app');
            var oParent = document.getElementsByClassName("el-main")[0];
            var sent = {
                l: 0,
                r: oParent.offsetWidth - oDiv.offsetWidth,
                t: 0,
                b: oParent.offsetHeight - oDiv.offsetHeight,
                n: 10
            }
            drag(oDiv, sent);
        }
        function drag(obj, sent) {
            var dmW = document.documentElement.clientWidth || document.body.clientWidth;
            var dmH = document.documentElement.clientHeight || document.body.clientHeight;
            var sent = sent || {};
            var l = sent.l || 0;
            var r = sent.r || dmW - obj.offsetWidth;
            var t = sent.t || 0;
            var b = sent.b || dmH - obj.offsetHeight;
            var n = sent.n || 10;
            obj.onmousedown = function(ev) {
                var oEvent = ev || event;
                var sentX = oEvent.clientX - obj.offsetLeft;
                var sentY = oEvent.clientY - obj.offsetTop;
                document.onmousemove = function(ev) {
                    var oEvent = ev || event;
                    var slideLeft = oEvent.clientX - sentX;
                    var slideTop = oEvent.clientY - sentY;
                    if (slideLeft <= l) {
                        slideLeft = l;
                    }
                    if (slideLeft >= r) {
                        slideLeft = r;
                    }
                    if (slideTop <= t) {
                        slideTop = t;
                    }
                    if (slideTop >= b) {
                        slideTop = b;
                    }
                    obj.style.left = slideLeft + 'px';
                    obj.style.top = slideTop + 'px';
                }
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }
        }
        function pagge() {}
    </script>
    

      http://www.jq22.com/demo/drag20151029/

  • 相关阅读:
    KMP字符串查找
    基数排序
    二分查找来查找旋转数组
    通过前序(后序)+中序创建树
    二维数组找最大值
    用字符串的空格替换其他字符
    桶排序
    字符串的排列
    和为S的两个数字
    整数中1出现的次数(从1到n整数中1出现的次数)
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11505888.html
Copyright © 2011-2022 走看看