Skip to content

Instantly share code, notes, and snippets.

@jikeytang

jikeytang/[ Javascript ] - 20140806-题目1

Last active August 29, 2015 14:04
Show Gist options
  • Save jikeytang/d5bfac89c90e85042a8f to your computer and use it in GitHub Desktop.
Save jikeytang/d5bfac89c90e85042a8f to your computer and use it in GitHub Desktop.
Download ZIP
[ Javascript ] - 20140806-题目1
Raw
[ Javascript ] - 20140806-题目1
用最简短的js原生代码实现一个div拖拽的过程。
PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```javascript
// you code
```
2. 粘贴代码时请使用shift+tab，缩进前面的空白。
@ljkfgh2008
Copy link

我方法应该是最复杂的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{          
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            new init('div1');
        };

        function init(id){
            var _this = this;
            this.oDiv = document.getElementById(id);
            this.disX = 0;
            this.disY = 0;
            this.oDiv.onmousedown = function(ev){
                _this.funDown(ev);
                return false;
            }
        }

        init.prototype.funDown = function(ev) {
            var oEven = ev||event;
            var _this = this;
            this.disX = oEven.clientX -this.oDiv.offsetLeft;
            this.disY = oEven.clientY - this.oDiv.offsetTop;
            document.onmousemove = function(ev){
                _this.funMove(ev);
            };
            document.onmouseup =  function(){
                _this.funUp();
            }
        };

        init.prototype.funMove = function(ev){
            var oEven = ev||event;
            this.oDiv.style.left = oEven.clientX - this.disX+'px';
            this.oDiv.style.top = oEven.clientY - this.disY+'px';
        };

        init.prototype.funUp = function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    </script>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

@chriswenwu
Copy link 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {width: 100px; height: 100px; background: red; position: absolute;}
        #img1 { position: absolute;}
    </style>
    <script>
        window.onload = function() {

            var oDiv = document.getElementById('div1');
            var oImg = document.getElementById('img1');

            drag(oImg);

            drag(oDiv);

            function drag(obj) {

                obj.onmousedown = function(ev) {
                    var ev = ev || event;

                    var disX = ev.clientX - this.offsetLeft;
                    var disY = ev.clientY - this.offsetTop;

                    if ( obj.setCapture ) {
                        obj.setCapture();
                    }

                    document.onmousemove = function(ev) {
                        var ev = ev || event;
                          if(ev.clientX<350){
                               obj.style.left=0;
                          }else{
                        obj.style.left = ev.clientX - disX + 'px';
                        obj.style.top = ev.clientY - disY + 'px';
                          }

                    }

                    document.onmouseup = function() {
                        document.onmousemove = document.onmouseup = null;
                        //释放全局捕获 releaseCapture();
                        if ( obj.releaseCapture ) {
                            obj.releaseCapture();
                        }
                    }

                    return false;

                }

            }

        }
    </script>
</head>

<body>
<div id="div1"></div>
<img src="1.jpg" id="img1" />
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment