可以拖动的DIV

来源：互联网发布：网络民族志与田野调查编辑：程序博客网时间：2024/05/02 01:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>自由拖动的DIV层方块</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#draggable{background-color:green;font-size:9pt;padding:30px;color:white;width:360px;height:224px;position:absolute;}</style><script type="text/javascript">var rDrag = {o:null,init:function(o){o.onmousedown = this.start;},start:function(e){var o;e = rDrag.fixEvent(e);               e.preventDefault && e.preventDefault();               rDrag.o = o = this;o.x = e.clientX - rDrag.o.offsetLeft;                o.y = e.clientY - rDrag.o.offsetTop;document.onmousemove = rDrag.move;document.onmouseup = rDrag.end;},move:function(e){e = rDrag.fixEvent(e);var oLeft,oTop;oLeft = e.clientX - rDrag.o.x;oTop = e.clientY - rDrag.o.y;rDrag.o.style.left = oLeft + 'px';rDrag.o.style.top = oTop + 'px';},end:function(e){e = rDrag.fixEvent(e);rDrag.o = document.onmousemove = document.onmouseup = null;},    fixEvent: function(e){        if (!e) {            e = window.event;            e.target = e.srcElement;            e.layerX = e.offsetX;            e.layerY = e.offsetY;        }        return e;    }}window.onload = function(){        var obj = document.getElementById('draggable');rDrag.init(obj);}</script></head><body><div id="draggable">这个可以拖动！</a></div></body></html>

本文地址：http://my.csdn.net/hfmbook

0 0