posts - 165, comments - 198, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

html 简单 div 拖动

Posted on 2007-05-08 12:28 G_G 阅读(3871) 评论(5)  编辑  收藏 所属分类: javascript
问题:  兴趣
解决:   div的 onclike ( this )  得到选择 
            由 window.event 得到 鼠标 x y 
            由 this.style.top/left 改变 div 位置 

        var x,y;
        function mousedown(obj)
        {
            obj.onmousemove = mousemove;
            obj.onmouseup = mouseup;
            
            oEvent = window.event ? window.event : event;
            x = oEvent.clientX;
            y = oEvent.clientY;
        }
        function mousemove()
        {
            oEvent = window.event ? window.event : event;
            var _top = oEvent.clientY - y + parseInt(this.style.top) + "px"; // oEvent.clientY - y  为div 上 移动的位置 再反映到                                                                                //parseInt(this.style.top)
            var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
            this.style.top = _top;
            this.style.left = _left;
            x =  oEvent.clientX;
            y =  oEvent.clientY
        }
        function mouseup()
        {
            this.onmousemove = null;
            this.onmouseup = null;
        }

心得: 兴趣决定一切

评论

# re: html 简单 div 拖动  回复  更多评论   

2007-05-08 12:45 by G_G
<div id="div1" style="width: 100px; height: 100px; top:10px; left:15px; cursor:move; background-color:Blue; position:absolute;" onmousedown="mousedown(this)" > </div>

# 拖动 带点   回复  更多评论   

2007-05-08 13:14 by G_G


var start = '<script src=test.js></script><body ondblclick=test()>';
var end = '</body>';

function test(){

oEvent = window.event ? window.event : event;

start += '<div id="div1" style="width: 100px; height: 100px; top:'+oEvent.clientY+'px; left:'+oEvent.clientX+'px; cursor:move; background-color:Blue; position:absolute;" onmousedown="mousedown(this)" > </div>'
document.write(start+end);
}

function mousedown(obj)
{
obj.onmousemove = mousemove;
obj.onmouseup = mouseup;

oEvent = window.event ? window.event : event;
x = oEvent.clientX;
y = oEvent.clientY;
}
function mousemove()
{
oEvent = window.event ? window.event : event;
var _top = oEvent.clientY - y + parseInt(this.style.top) + "px";
var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
this.style.top = _top;
this.style.left = _left;
x = oEvent.clientX;
y = oEvent.clientY
}
function mouseup()
{
this.onmousemove = null;
this.onmouseup = null;
}

# 拖动 带点   回复  更多评论   

2007-05-08 13:14 by G_G
<script src='test.js'></script>
<body ondblclick='test()'>

</body>

# 半终结 版 哈哈 [未登录]  回复  更多评论   

2007-05-08 17:28 by G_G

function test(){
e = window.event ? window.event : event;
var x = e.clientY;
var y = e.clientX;
var div = document.createElement("<div onmousedown=mousedown(this)>");
div.style.top = x;
div.style.left = y;
div.style.width = 50 ;
div.style.height = 50;
div.style.cursor = "move";
div.style.position= "absolute";
div.style.backgroundColor = "Blue";
document.body.appendChild(div);
}



function mousedown(obj)
{
obj.onmousemove = mousemove;
obj.onmouseup = mouseup;

oEvent = window.event ? window.event : event;
x = oEvent.clientX;
y = oEvent.clientY;
}
function mousemove()
{
oEvent = window.event ? window.event : event;
var _top = oEvent.clientY - y + parseInt(this.style.top) + "px";
var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
this.style.top = _top;
this.style.left = _left;
x = oEvent.clientX;
y = oEvent.clientY
}
function mouseup()
{
this.onmousemove = null;
this.onmouseup = null;
}

# re: html 简单 div 拖动  回复  更多评论   

2010-04-14 09:59 by 火星华人
好。

只有注册用户登录后才能发表评论。
网站导航: