程序博客网 > 谷歌语音识别python

js 的拖拉效果

来源：互联网发布：谷歌语音识别python 编辑：程序博客网时间：2024/04/28 17:50

源码（转自codeproject网）

<head>

<script type="text/javascript">
var oDragItem = null;
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){
   MakeDragable("idBox1");
   MakeDragable("table");
}

function MakeDragable(id){
   var oBox = $(id);
   oBox.onmousemove= function(e){DragMove(oBox,e)};
   oBox.onmouseup=function(e){DragStop(oBox,e)};
   oBox.onmousedown=function(e){DragStart(oBox,e);return false};
   oBox.className = "Dragable";
}

function DragStart(o,e){
   if(!e) var e = window.event;
   oDragItem = o;
   OverlayFrames();

   if (e.offsetX){
       iClickOffsetX = e.offsetX;
       iClickOffsetY = e.offsetY;
   }else{
       var oPos = GetObjPos(o);
       iClickOffsetX = e.clientX - oPos.x;
       iClickOffsetY = e.clientY - oPos.y;
   }

   if (o.setCapture){
       o.setCapture();
   }else{
       window.addEventListener ("mousemove", DragMove2, true);
       window.addEventListener ("mouseup",   DragStop2, true);
   }
}

function DragMove2(e){
   DragMove(oDragItem,e);
}

function DragStop2(e){
   DragStop(oDragItem,e);
}

function DragMove(o,e){
   if (oDragItem==null) return;

   if(!e) var e = window.event;
   var x = e.clientX + document.body.scrollLeft - document.body.clientLeft - iClickOffsetX;
   var y = e.clientY + document.body.scrollTop - document.body.clientTop - iClickOffsetY;

   with(oDragItem.style){
       zIndex = 1000;
       position="absolute";
       left=x;
       top=y;
   }
}

function DragStop(o,e){
   if (oDragItem==null) return;

   if (o.releaseCapture){
       o.releaseCapture();
   }else if (oDragItem){
       window.removeEventListener ("mousemove", DragMove2, true);
       window.removeEventListener ("mouseup",   DragStop2, true);
   }

   oDragItem.style.zIndex = 1;
   oDragItem = null;
   RemoveOverlays();
}

function $(s){
   return document.getElementById(s);
}

function GetObjPos(obj){
   var x = 0;
   var y = 0;

   var w = obj.offsetWidth;
   var h = obj.offsetHeight;
   if (obj.offsetParent) {
       x = obj.offsetLeft
       y = obj.offsetTop
       while (obj = obj.offsetParent){
           x += obj.offsetLeft;
           y += obj.offsetTop;
       }
   }
   return {x:x, y:y, w:w, h:h};
}

function OverlayFrames(){
   if (IsIE() || IsFF()) return;
   var oFrames = document.getElementsByTagName("iframe");
   for (var i=0; i < oFrames.length; i++){
       Overlay(oFrames[i]);
   }
}

function RemoveOverlays(){
   if (IsIE() || IsFF()) return;
   var oFrames = document.getElementsByTagName("iframe");
   for (var i=0; i < oFrames.length; i++){
       var id = oFrames[i].id + "_over";
       var div = $(id);
       if (div) div.parentNode.removeChild(div);
   }
}

function Overlay(o){
   var oPos = GetObjPos(o);
   var id = o.id + "_over";
   var div = $(id);
   if (div==null){
       div = document.createElement("div");
       div.id = id;
       div.style.position = "absolute";
       //div.style.backgroundColor = "pink";
       document.body.appendChild(div);
   }

   div.style.left = oPos.x;
   div.style.top = oPos.y;
   div.style.width = oPos.w;
   div.style.height = oPos.h;
}

function IsIE(){
   return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}

function IsFF(){
   return /Firefox/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}

</script>
<style>
.Dragable{
   cursor:move;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}
</style>
</head>
<body onload="OnLoad()">

<div selectable="no" id="idBox1" style="left: 100px; width: 100px; height:100px; background-color: Red; text-align: center;">Test</div>
<div selectable="no" id="idBox2" style="width: 100px; height:100px; background-color: Yellow; text-align: center; top:200;">Test</div>

<iframe id="idFrame1" src="http://www.google.com.hk/"></iframe>

</body>

谷歌语音识别python

谷歌语音识别python

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子钵体糕钵的意思捺钵怎么读芒鞋破钵无人识盆丰钵满还卿一钵无情泪钵兰街马王钵的读音钵山余霞阁记优昙钵罗花钵的拼音钵仔粉钵罗藻钵酒钹的图片钹的拼音鈸鳓鱼卢钺是卢梅坡吗钻趣钻钻钻表钻绣线钻钻链钻包缝钻钻笔玻钻之争钻木取火钻拼音钻的拼音长生劫5000钻领取码莫桑钻危害父亲半夜钻女儿金刚钻钻怎么拼音钻字拼音钻怎么读钻多音字钻的拼音是什么