图层编辑组件 与大家分享 多提建议少吐口水

[ybcola]

Hedit_v1.0.js源码
<!--
/*===============Hedit_v1.0图层编辑组件 作者：LightMan============
抽象说明：组件抽象为一个以Div构成的编辑框，编辑框可以用appendChild方法加入到网页中的任何元素做为子元素
可以装入任何以html代码组成的内容,返回一个物件对像，通过对物件的属性控制进行显示!
可以删除装入的物件,通过物件对像名删除。
可以设置各物件在舞台上显示显示方式或通过CSS样式控制显示,可返回装入的任何物件的信息
属 性：width（宽度）;height（高度）;background（背景）;classname（样式名）;opting（当前活动物件）
方 法：(公有全局调用)
paint 重画编辑组件,设置属性后调用该方法显示生效
toString 返回编辑组件对象的HTML内容
editobj 返回编辑组件HTML元素对象
loadthing 装入编辑物件
removething 移除编辑物件
move 移动当前活动物件方法
movelayer 对象所在层移动,即交换对象所在层
getinfo 取得编辑组件中物件的信息
(私有内部调用)
things_getlayer 返回给定物件所在的层
things_move 移动物件所在层
things_remove 从物件集合数组移除物件
things_additem 向物件集合数组加入物件
集 合：things 所有物件集合对象数组
============================*/
function hedit(owidth,oheight,obg,oclass){
//构造属性，初始数据部分
var editobj; //定义内部变量，编辑窗口DHTML对象
var nav=navigator.appName;
var nav_v=navigator.appVersion;
editobj=document.createElement("div");
var me=this; //简写this构造为me;
me.width=isNaN(owidth)?0:owidth; //编辑窗口宽度
me.height=isNaN(oheight)?0:oheight; //编辑窗口商度
me.background=obg; //编辑窗口背景,如果为图片给定如url("http://www.eread.com.cn/editbg.gif")
me.classname=oclass; //编辑窗口显示CSS样式表,请写样式表的名称
me.opthing=null; //当前操作物件
var mouseX=0; //鼠标事件X坐标
var mouseY=0; //鼠标事件Y坐标
//构造编辑框中对象集合
me.things=new Array();

function things_remove(obj){ //对象集合移除对象
var arr=me.things;
var i,move=arr.length+1;
for(i=0;i<arr.length;i++)
if(arr[i]==obj){move=i+1;break;}
if (move<=arr.length){
for(i=move;i<arr.length;i++){
arr[i-1]=arr[i];
arr[i-1].style.zIndex=i-1;
}
arr.length=arr.length-1;
}
}
function things_additem(obj){ //对象集合添加对象
me.things[me.things.length]=obj;
obj.style.zIndex=me.things.length;
}
function things_getlayer(obj){ //取得对象所在层
var arr=me.things;
for (var i=0;i<arr.length;i++)if(arr[i]==obj) return i;
return -1;
}
function things_move(i,method){ //对象前移
var arr=me.things;
if (i<0||i>arr.length-1) return;
var swapobj=arr[i];
switch(method){
case 0: //下移
if (i>0){
arr[i]=arr[i-1];arr[i-1]=swapobj;
arr[i-1].style.zIndex=i-1;arr[i].style.zIndex=i;
}
break;
case 1: //上移
if (i<arr.length-1){
arr[i]=arr[i+1];arr[i+1]=swapobj;
arr[i].style.zIndex=i;arr[i+1].style.zIndex=i+1;
}
break;
case 2: //移到最下
if(i>0){
for(z=i;z>0;z--){arr[z]=arr[z-1];arr[z].style.zIndex=z;}
arr[0]=swapobj;arr[0].style.zIndex=0;
}
break;
case 3: //移到最上
if(i<arr.length-1){
for(z=i;z<arr.length-1;z++){arr[z]=arr[z+1];arr[z].style.zIndex=z;}
arr[arr.length-1]=swapobj;arr[arr.length-1].style.zIndex=[arr.length-1];
}
}
}

me.movelayer=function(obj,method){ //对象集合所在层移动
things_move(things_getlayer(obj),method);
}
me.getinfo=function(obj,infotype){//获取物件信息
if(things_getlayer(obj)>=0){
switch(infotype){
case "left":
return parseInt(obj.style.left);
case "top":
return parseInt(obj.style.top);
}
}
}
me.paint=function(){ //画编辑窗口
editobj.id="hedit";
editobj.className=me.classname;
//editobj.innerHTML="dddddddddddddddd";
editobj.style.background=me.background;
editobj.style.width=me.width+"px";
editobj.style.height=me.height+"px";
}
me.loadthing=function(htmlstr){
var mX,mY,oX,oY;
if (!htmlstr) return;
var thing=document.createElement("div");
thing.style.background="transparent";
thing.style.left="0px";
thing.style.top="0px";
thing.style.position="absolute";
thing.innerHTML=htmlstr;
//thing.className="divTitle";
thing.onclick=function(){
me.opthing=thing;
}
thing.onmouseover=function(){
thing.style.border="1px dashed";
}
thing.onmouseout=function(){
thing.style.border="none";
}
drag(thing,"",editobj);
things_additem(thing);
editobj.appendChild(thing);
return thing;
}
//移除物件
me.removething=function(obj){
try{
editobj.removeChild(obj);
things_remove(obj);
}catch(ex){}
}
me.move=function(obj,method){
try{
switch(method){
case 0: //物件显示上移
obj.style.top=(parseInt(obj.offsetTop)-2)+"px";
break;
case 1://物件显示下移
obj.style.top=(parseInt(obj.offsetTop)+2)+"px";
break;
case 2: //物件显示左移
obj.style.left=(parseInt(obj.offsetLeft)-2)+"px";
break;
case 3://物件显示右移
obj.style.left=(parseInt(obj.offsetLeft)+2)+"px";
}
}catch(ex){}
}
//返回编辑窗口对象中的HTML内容
me.toString=function(){
return editobj.innerHTML;
}
me.editobj=function(){
return editobj;
}
}
/*===============Hedit_v1.0基本鼠标拖动============
功 能：实现图层鼠标拖动，图层的position必须为absolute属性
参 数：o要拖动的对象
r限定拖动范围[left,right,top,bottom]为空字符不限定；
obj重定义容器
已测浏览器：IE6.0、firefox1.5
最后更改:2006-3-29
=================================================*/
function drag(o,r,obj){
try{o.firstChild.onmousedown=function(){return false;}}catch(ex){}
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
if (a.button==1||a.button==0){
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
var ox=obj?obj.offsetLeft:0,oy=obj?obj.offsetTop:0;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
var mx,my;
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
mx=(ox?a.pageX-ox:a.pageX)+parseInt(d.body.scrollLeft);
if(!a.pageY)a.pageY=a.clientY;
my=(oy?a.pageY-oy:a.pageY)+parseInt(d.body.scrollTop);
var tx=mx-x,ty=my-y;
document.getElementById("showm").innerHTML=ox;
o.style.left=(tx<r[0]?r[0]:tx>r[1]?r[1]:tx)+"px";
o.style.top=(ty<r[2]?r[2]:ty>r[3]?r[3]:ty)+"px";
}

d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
}
}
}
}
//-->

[ybcola]

Hedit_v1.0.htm演示文件,其中图片自己加
<?xml version="1.0" encoding="utf-8"?>
<!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> Hedit_v1.0 Demo 3 </title>
<script src="Hedit_v1.0.js" type="text/javascript"></script>
<style type="text/css">
<!--
.movet {
position: relative;
background: #fcffec;
border: 1px solid #666666;
clear: both;
overflow: hidden;
}
.divTitle {
background: #00ffcc;
left: 270px;
top: 20px;
width: 60px;
position: absolute;
}
.overboder {
border: 1px dashed;
}
-->
</style>
</head>

<body>
<!--
<div id="movet" style="left:0px;top:0px">此处显示 id "MoveT" 的内容
<div id="divTitle">此处显示 id "Nei" 的内容</div>
</div>
<div id="moveobj"></div>
-->
<p>Hedit v1.0 Demo: <br />
<br />

背景：
<select name="select" onchange="hobj.background='url('+this.value+')';hobj.paint();">
<option value="img/b.gif">b.gif</option>
<option value="img/t.gif">t.gif</option>
<option value="img/t1.gif">t1.gif</option>
</select>
<br />
物件HTML代码：
<textarea name="thing" cols="80" rows="4" id="thing"><img src=img/t.gif /></textarea>
<br />
</p>
<p>
<input type="submit" name="Submit" value="装入对象" onclick="boy[boy.length]=hobj.loadthing(document.getElementById('thing').value);" />
<input type="submit" name="Submit" value="左移" onmousemove="hobj.move(hobj.opthing,2)" />
<input type="submit" name="Submit" value="右移" onmousemove="hobj.move(hobj.opthing,3)" />
<input type="submit" name="Submit" value="上移" onmousemove="hobj.move(hobj.opthing,0)" />
<input type="submit" name="Submit" value="下移" onmousemove="hobj.move(hobj.opthing,1)" />
<input type="submit" name="Submit" value="移除" onclick="hobj.removething(hobj.opthing)" />
<input type="submit" name="Submit2" value="上层" onclick="hobj.movelayer(hobj.opthing,1)" />
<input type="submit" name="Submit3" value="下层" onclick="hobj.movelayer(hobj.opthing,0)" />
<input type="submit" name="Submit" value="顶层" onclick="hobj.movelayer(hobj.opthing,3)" />
<input type="submit" name="Submit" value="底层" onclick="hobj.movelayer(hobj.opthing,2)" />
<input type="button" name="Submit" value="取物件信息" onclick="alert(hobj.getinfo(hobj.opthing,'left'))" />
</p>
<div id="showm"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="400"> </td>
<td id="mmmo"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="unnamed1"> </td>
</tr>
</table>
<script type="text/javascript">
var boy=new Array();
var hobj=new hedit(460,380,"url(img/b.gif)","movet");
alert(hobj);
document.getElementById("mmmo").appendChild(hobj.editobj());
hobj.paint();
</script>
</body>
</html>

[ybcola]

没人顶呢,自己顶

[coolattt]

我来踩哈。顶先：）

[coolattt]

我来接分。哈哈：）

[coolattt]

我先来接分哈。顶………………

[secondflying]

我也来接分，再慢慢看，呵呵！！

[dong127]

好像挺复杂的，copy下来慢慢看～～

[ybcola]

有注解,自己觉得还是比较简单

[ybcola]

顶一下，上一100就结

[DeluxWorld]

接分~

[ImN1]

除了小说和电影不喜欢看太长的东西，自己写的除外，哈哈

[ybcola]

顶上去

[玄之丞]

接分..

另建議樓主,改一個名稱
Hedit 有一個很出名的二進制編輯軟件也叫這個名的說.

[liuph3000]

mark