1、自定义右键菜单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        #div1 {width: 100px;height: 100px;border: 1px solid #000;position: absolute;background: #CCC;display: none;}
    </style>
    <script>
        //阻止默认事件：右键菜单
        // document.οncοntextmenu=function () {
        //     return false
        // }
        function getPos(ev) {

            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
 
            return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}

        }

        document.οncοntextmenu=function (ev) {
            var oe=ev||event
            var od=document.getElementById('div1')
            od.style.display='block'

            var odpos=getPos(ev)
            od.style.left=odpos.x+'px'
            od.style.top=odpos.y+'px'

            return false
        }

        document.οnclick=function () {
            var od=document.getElementById('div1')
            od.style.display='none'

        }

    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li>新建</li>
            <li>刷新</li>
            <li>关闭</li>
            <li>查看</li>
        </ul>
    </div>
</body>
</html>

2、拖拽

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #div1 {width: 200px;height: 200px;border: 1px solid #000;background: #CCC;position: absolute;}
 </style>
 <script type="text/javascript">
  window.οnlοad=function () {
   var od=document.getElementById('div1')
   var x=0
   var y=0
   document.οnmοusedοwn=function (ev) {
    x=getPos(ev).x-od.offsetLeft
    y=getPos(ev).y-od.offsetTop
    document.οnmοusemοve=function (ev) {
     var w=getPos(ev).x-x
     var h=getPos(ev).y-y
     if(w<0){
      w=0
      }else if (w>document.documentElement.clientWidth-od.offsetWidth) {
       w=document.documentElement.clientWidth-od.offsetWidth
      }
     if(h<0){
      h=0
      }else if (h>document.documentElement.clientHeight-od.offsetHeight) {
       h=document.documentElement.clientHeight-od.offsetHeight
      }
     od.style.left=w+'px'
     od.style.top=h+'px'
    
    }
    document.οnmοuseup=function () {      
     document.οnmοusemοve=null
     document.οnmοuseup=null     
    }
    //阻止FF bug
    return false
   }
  }
  function getPos(ev) {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
   var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
   
   return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop} 
  }
 </script>
</head>
<body>
 <div id="div1"></div>
</body>
</html>

3、不能拖出指定对象

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #div1 {width: 100px;height: 100px;border: 1px solid #000;background: #CCC;position: absolute;}
 #div2 {width: 200px;height: 200px;border: 1px solid #000;background: red;position: relative;}

 </style>
 <script type="text/javascript">
  window.οnlοad=function () {
   var od=document.getElementById('div1')
   var od2=document.getElementById('div2')
   var x=0
   var y=0
   document.οnmοusedοwn=function (ev) {
    x=getPos(ev).x-od.offsetLeft
    y=getPos(ev).y-od.offsetTop
    document.οnmοusemοve=function (ev) {
     var w=getPos(ev).x-x
     var h=getPos(ev).y-y
     if(w<0){
      w=0
      }else if (w>od2.offsetWidth-od.offsetWidth) {
       w=od2.offsetWidth-od.offsetWidth
      }
     if(h<0){
      h=0
      }else if (h>od2.offsetHeight-od.offsetHeight) {
       h=od2.offsetHeight-od.offsetHeight
      }
     od.style.left=w+'px'
     od.style.top=h+'px'
     
    }
    document.οnmοuseup=function () {      
     document.οnmοusemοve=null
     document.οnmοuseup=null     
    }
    //阻止FF bug
    return false
   }
  }
  function getPos(ev) {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
   var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
    
   return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop} 
  }
 </script>
</head>
<body>
<div id="div2">
    <div id="div1"></div>
</div>

</body>
</html>