用纯JS用鼠标移动DIV的位置

鼠标拖动DIV上下左右移动

JS部分代码

<script type="text/javascript">
        var mouseX, mouseY;
        var objX, objY;
        var isDowm = false; //是否按下鼠标
        function mouseDown(obj, e, id) {
            var divid = id;
            var div = document.getElementById(divid);
            obj.style.cursor = "move";
            objX = div.style.left;
            objY = div.style.top;
            mouseX = e.clientX;
            mouseY = e.clientY;
            isDowm = true;
        }
        function mouseMove(e, id) {
            var divid = id;
            var div = document.getElementById(divid);
            var x = e.clientX;
            var y = e.clientY;
            if (isDowm) {
                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
                div.style.zIndex = 200 + "px";
            }
        }
        function mouseUp(e, id) {
            var divid = id;
            if (isDowm) {
                var x = e.clientX;
                var y = e.clientY;
                var div = document.getElementById(divid);
                div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
                div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
                mouseX = x;
                rewmouseY = y;
                divLc1.style.cursor = "default";
                div.style.zIndex = 200 + "px";
                isDowm = false;
            }
        }
</script>

HTML部分代码

<div id="divLc1" class="divLc_ShortWave" style="background-color: #00FFFF; border: 1px solid red; height: 50%; top: 100px; left: 100px; width: 300px; position: absolute;" 
   onm ousedown="mouseDown(this,event,'divLc1')" onm ousemove="mouseMove(event,'divLc1')" onm ouseup="mouseUp(event,'divLc1')">
        </div>
上一篇:Java学习。方法的调用


下一篇:js进制直接互相转换