在父容器中拖拽

发布者:聂永彬     所属单位:樟树第三中学     发布时间:2016-02-16    浏览数:0

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div2{ width:600px; height:600px; background:#ccc; position:relative;}
#div1 { width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function()
{
 
 oDiv=document.getElementById('div1');
 oDiv2=document.getElementById('div2');
 var disX=0;
 var disY=0;
 oDiv.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  disX=oEvent.clientX-oDiv.offsetLeft;
  disY=oEvent.clientY-oDiv.offsetTop;

  if(oDiv.setCapture)
  {
   //在ie6  ie7  ie8 下使用
   oDiv.onmousemove=function(ev)
   {
    var oEvent=ev||event;
    var l=oEvent.clientX-disX;
    var t=oEvent.clientY-disY;
 //如果用代码代替下面的条件,将出现吸附现象
 //   if(l<30){l=0;}
    if(l<0)
    {
     l=0;
    }
    else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
    {
     l=oDiv2.offsetWidth-oDiv.offsetWidth;
    }
    if(t<0)
    {
     t=0;
    }
    else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
    {
     t=oDiv2.offsetHeight-oDiv.offsetHeight;
    }
    oDiv.style.left=l+'px';
    oDiv.style.top=t+'px';
    
   }
 //  oDiv.onmouseup=function()
    oDiv.onmouseup=function()
    {
     oDiv.onmousemove=null;
     oDiv.onmouseup=null;
    }
 //下面代码是用来阻止ff默认事件(影子拖拽)
    return false;
    oDiv.setCapture();
  }
  else
  {
   document.onmousemove=function(ev)
   {
    var oEvent=ev||event;
    var l=oEvent.clientX-disX;
    var t=oEvent.clientY-disY;
 //如果用代码代替下面的条件,将出现吸附现象
 //   if(l<30){l=0;}
    if(l<0)
    {
     l=0;
    }
    else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
    {
     l=oDiv2.offsetWidth-oDiv.offsetWidth;
    }
    if(t<0)
    {
     t=0;
    }
    else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
    {
     t=oDiv2.offsetHeight-oDiv.offsetHeight;
    }
    oDiv.style.left=l+'px';
    oDiv.style.top=t+'px';
    
   }
 //  oDiv.onmouseup=function()
    document.onmouseup=function()
    {
     document.onmousemove=null;
     document.onmouseup=null;
    }
  }
  
  
  
 }
 
}
</script>
</head>

<body>

我们不能一边宣布全面建成了小康社会,另一边还有几千万人口的生活水平处在扶贫标准线以下,这既影响人民群众对全面建成小康社会的满意度,也影响国际社会对我国全面建成小康社会
<div id="div2">不能一边全面小康,一边几千万人生活在扶贫线下

我们不能一边宣布全面建成了小康社会,另一边还有几千万人口的生活水平处在扶贫标准线以下,这既影响人民群众对全面建成小康社会的满意度,也影响国际社会对我国全面建成小康社会的认可度
<div id="div1">提出创新、协调、绿色、开放、共享五大发展理念

建议稿提出了创新、协调、绿色、开放、共享的发展理念。这五大发展理念,是“十三五”乃至更长时期我国发展思路、发展方向、发展着力点的集中体现,也是改革开放30多年来我国发展经验的集中。

</div>
</div>
</body>
</html>

评论
发布

2015年