各位，能给一个Javascript结合HTC做验证的例子吗？

Question

很多HTC都是JavaScript编写的阿
我这里给你提供的是WebFx的genmove.htc，你可以参考一下--------------------------------
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="moveme_onmousedown()"/>
<!--<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="initPosition()"/>-->
<!--<PUBLIC:ATTACH EVENT="onmousemove" ONEVENT="moveme_onmousemove()"/>-->
<PUBLIC:PROPERTY NAME="handlefor"/>
<PUBLIC:PROPERTY NAME="dontraise"/><SCRIPT>///////////////////////////////////////////////////////////////////////
//     This script was designed by Erik Arvidsson for WebFX          //
//                                                                   //
//     For more info and examples see: http://webfx.eae.net          //
//     or send mail to [email protected]                                  //
//                                                                   //
//     Feel free to use this code as lomg as this disclaimer is      //
//     intact.                                                       //
///////////////////////////////////////////////////////////////////////var dragobject = null;
var tx;
var ty;function moveme_onmousedown() {
if (handlefor != null) {
dragobject = element.document.getElementById(handlefor);
}
else
dragobject = element; if (dragobject == null) return;

if (!dontraise) makeOnTop(dragobject);

ty = window.event.clientY - getTopPos(dragobject);
tx = window.event.clientX - getLeftPos(dragobject);

window.event.returnValue = false;
window.event.cancelBubble = true;
}function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}function moveme_onmousemove() {
if (dragobject) {
if (window.event.clientX >= 0 && window.event.clientY >= 0) {
dragobject.style.left = window.event.clientX - tx;
dragobject.style.top = window.event.clientY - ty;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}function getLeftPos(el) {
if (el.currentStyle.left == "auto")
if (el.currentStyle.position != "relative")
return el.offsetLeft;
else
return 0;
else
return parseInt(el.currentStyle.left);}function getTopPos(el) {
if (el.currentStyle.top == "auto")
if (el.currentStyle.position != "relative")
return el.offsetTop;
else
return 0;
else
return parseInt(el.currentStyle.top);
}function makeOnTop(el) {
var daiz;
var max = 0;
var da = element.document.all;

for (var i=0; i<da.length; i++) {
daiz = da[i].style.zIndex;
if (daiz != "" && daiz > max)
max = daiz;
}

el.style.zIndex = max + 1;
}if (currentStyle.position != "absolute" && currentStyle.position != "relative")
style.position = "relative";//style.cursor = "move";element.document.attachEvent("onmousemove", moveme_onmousemove);
element.document.attachEvent("onmouseup", moveme_onmouseup);
</SCRIPT>
</PUBLIC:COMPONENT>

Answer 1

类似的,我以前也写过一个移动的HTC,包括在标记里面的HTML都可以实现拖动操作<!--
-------------------------------------------------------------------------------------
文件名  :moveable.HTC
功能    :可移动的系统要求:IE 5.0 or later
历史记录:操作      作者        时间  
         建立      美洲豹      2003/3/23
修改 美洲豹 2003/3/25 修改了包含HTML不能有多层标记的错误
-------------------------------------------------------------------------------------
Z-Index 和 初始位置可以在 <xmlns:move style="left:100;top:100;z-index:100"> 设置
-->
<PUBLIC:COMPONENT tagName=move>
<PUBLIC:ATTACH event="onmousedown" for="document" onevent="drags();"/>
<PUBLIC:ATTACH event="onmouseup" for="document" onevent="finlish()"/>
<PUBLIC:ATTACH event="oncontentready" onevent="fnInit()"/>
<PUBLIC:PROPERTY name="MaxX"/> <!--这四个属性有待扩充功能,实现拖动的范围判断-->
<PUBLIC:PROPERTY name="MaxY"/>
<PUBLIC:PROPERTY name="MaxW"/>
<PUBLIC:PROPERTY name="MaxH"/>
</PUBLIC:COMPONENT>
<script>
var num=element.uniqueID;//获得一个ID,避免重复ID
function fnInit()
{
   var oDiv=document.createElement("<DIV id='div"+num+"' style='position:absolute;cursor:hand;top:"+element.style.posTop+";left:"+element.style.posLeft+";z-index:"+element.style.zIndex+"'></Div>");
 oDiv.innerHTML=element.innerHTML;
 element.innerHTML="";
 element.appendChild(oDiv);
}
function move()
 {
  if(window.event.button==1 && dragapproved)
   {
    var newleft=temp1+window.event.clientX-x
var newtop=temp2+window.event.clientY-y
eventsource.style.pixelLeft=newleft
    eventsource.style.pixelTop=newtop
    return false
   }
 }
var dragapproved=false;
var eventsource,x,y;
function finlish()
{
    dragapproved=false
}
function isChild(parentObj,obj) //使用递归判断事件源是element的一部分,已经使用 contains 现成函数代替
{
  if(obj.parentElement==parentObj) return true
  for(var i=0;i<parentObj.children.length;i++)
{
if(parentObj.children[i].children.length>0)
{
 return isChild(parentObj.children[i],obj)
}
   if(parentObj.children[i]==obj)
return true
}
return false
}
function drags() //移动操作
 {
  if(element.contains(event.srcElement))
{
      dragapproved=true
      eval("eventsource=div"+num)
      temp1=eventsource.style.pixelLeft
      temp2=eventsource.style.pixelTop
      x=window.event.clientX
      y=window.event.clientY
     window.document.attachEvent("onmousemove",move)
}
 }
</script>HTML代码<html xmlns:leo>
<head>
<title>移动HTC</title>
<style>
@media all{
    leo\:move  {behavior:url(moveable.htc)}
}
</style>
<head>
<body>
<leo:move style="top:10;left:10">
Hello wolrd
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td>Hello world</td>
</tr>
</table>
</leo:move>
</body>
</html>