本文介绍了一个用于商铺布局设计的编辑器实现方案，该方案通过HTML、CSS和JavaScript实现了商铺的添加、删除及移动等功能，提供了直观的用户界面来管理商铺布局。
<!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>
<link href="css/bzt.css" rel="stylesheet" type="text/css" />
<!--移动设备-->
<script language="javascript" src="js/pic_move.js"></script>
<!--右键增删移动设备-->
<script language="javascript" src="js/rightkey_proc.js"></script>
</head>
<body>
<div class="jk_bzt" id="jk_box" onmousemove="rightkey_getbyobject(this);" onmouseout="rightkey_outbyobject();" >
<img src="images/sxt_kai.png" style=" position:absolute;" class="jk_proc " id="jk_proc" onclick="commit(this)" onmousedown="sxt_select(this);" title="0"/>
<img src="images/sxt_kai.png" style=" position:absolute; left:100px; top:100px;" id="jk_proc2" onclick=" commit(this)" onmousedown="sxt_select(this);" class="jk_proc " title="2"/>
<img src="images/sxt_kai.png" style=" position:absolute; left:200px; top:200px;" id="jk_proc3" onclick=" commit(this)" onmousedown="sxt_select(this);" class="jk_proc " title="3" />
</div>
<span id="contextmenu_jk" class="contextmenu">
<a href="#" id="add_sxt" >增加商铺</a>
<a href="#" id="del_sxt">删除商铺</a>
<a href="#" id="move_sxt" onclick="move_proc(['jk_proc','jk_proc2','jk_proc3'])" >移动模式</a>
<a href="#" id="show_x"></a>
<a href="#" id="show_y"></a>
<a href="#" id="shebei_id"></a>
</span>
<span id="contextmenu_no" >
</span>
<div id="add_dt_tool">
<table width="98%" height="98%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="30%">商铺名称：</td>
<td><input name="" type="text" /></td>
</tr>
<tr>
<td>商铺图片：</td>
<td><input name="" type="file"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="" type="button" value="保存" onclick="" /><input name="" type="button" value="取消" onclick="del_proc_cont()"/>
</td>
</tr>
</table>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------bzt.css-----------------------------------------------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */
html,body{ padding:0;margin:0; background:#ebf0f0; width:100%; height:100%; }
/*画线*/
v\:* {behavior:url(#default#VML);}
img{ border:0;}
a{ text-decoration:none}
#center{ width:1285px; height:718px; top:50%; margin-top:-359px; left:50%; margin-left:-642px; position:relative; }
/*布置图*/
#bzt{ position:absolute; width:789px; height:538px; left:107px; top:88px; z-index:100; background:url(../images/bzt.png) no-repeat;}
.tushi{position:absolute; width:209px; height:302px; left:1073px; top:410px; z-index:300; background:url(../images/tushi.png) no-repeat;}
.bei{position:absolute; width:26px; height:84px; left:1153px; top:15px; z-index:300; background:url(../images/bei.png) no-repeat;}
/*自定义鼠标右键*/
/*.contextmenu{border:1px solid #e6e8e7;background:#f8f9fd;width:120px;padding:5px;display:none;position:absolute}
.contextmenu a{ background:url(san.png) 5px center no-repeat; display:block; height:25px; line-height:25px; color:#555; line-height:25px; text-decoration:none; border-bottom:#e6e7eb 1px solid; padding-left:25px; color:#2b3b4a; font-size:12px;}
.contextmenu a:hover{ background:url(san2.png) 5px center no-repeat #a5bfd1; }
#contextmenu_no{width:0; padding:0;}*/
.contextmenu{border:1px solid #96b5da;background:#e8e8e8;width:120px;padding:5px;display:none;position:absolute; z-index:999999; overflow:hidden;}
.contextmenu a{ background:url(../images/san.png) 5px center no-repeat; display:block; height:25px; line-height:25px; line-height:25px; text-decoration:none; padding-left:25px; color:#000; font-size:12px; border-top:#fff 1px solid; border-bottom:#96b5da 1px solid;}
.contextmenu a.at{ border-top:#e8e8e8 1px solid;}
.contextmenu a.ab{ border-bottom:#e8e8e8 1px solid;}
.contextmenu a.dis{ color:#ccc;}
.contextmenu a:hover{ background:url(../images/san2.png) 5px center no-repeat #ccd7e7; border:#96b5da 1px solid;}
/*周界右侧导航菜单*/
.zj_menu_right{ width:28px; height:auto; position:absolute; top:30px; right:0; z-index:999999; font-size:13px; letter-spacing:3px;}
.zj_menu_right a{ height:110px; background:url(../images/zjmenu_right2.png) right bottom no-repeat; display: block; margin-bottom:10px; text-align:center; color:#16466d; writing-mode:tb-rl; padding-right:2px;}
.zj_menu_right a:hover,.zj_menu_right a.slct_zj{ background:url(../images/zjmenu_right.png) right top no-repeat; color:#aad7fb; writing-mode:tb-rl; }
/*监控增加背景页*/
/*.jk_bzt{ width:1285px; height:718px; top:50%; margin-top:-359px; left:50%; margin-left:-642px; position:relative; background:url(../images/jk_bg2.jpg) center center no-repeat #e5e5e5;}
*/
.jk_bzt{ width:1285px; height:718px; top:0; left:0; position:relative; background:url(../images/small.jpg) center center no-repeat #e5e5e5;}
#add_dt_tool{ width:300px; height:100px; padding:5px 10px 0 10px; border:#ccc 1px solid; background:#e5e5e5; text-align:left; z-index:999999; font-size:12px; display:none; position:absolute;}
#add_dt_tool input{ margin-left:8px; height:20px; font-size:12px; padding:0 5px;}
.jk_proc{ width:24px; height:13px; display:block; position:absolute; z-index:10000; }
/*拖动图片*/
.dragme{position:relative;}
--------------------------------------------------------------------------------------------rightkey_proc.js-----------------------------------------------------------------------------------------------------------
/*********************************************************************************************************************************************
Description: 右键增加，删除设备，移动设备，移动设备提交
by fangcaoju
*********************************************************************************************************************************************/
var rightkey_lb; //全局激活的对象
var contextmenu; //全局的右键菜单
var event_x,event_y; //当前的鼠标的XY的坐标
var sxt_cur=null; //当前按下的设备的id
var move_arr; //移动的数组
var move_state=false; //是否移动
/*********************************************************************************************************************************************
Function: rightkey_outbyobject
Description: 获取单击的对象
by fangcaoju
*********************************************************************************************************************************************/
function rightkey_getbyobject(oo){
//alert(obj);
if(oo!=null){
rightkey_lb=oo.id;
//alert(rightkey_lb);
}
else
{
alert("get没找到");
}
}
/*********************************************************************************************************************************************
Function: rightkey_outbyobject
Description: 释放单击的对象
by fangcaoju
*********************************************************************************************************************************************/
function rightkey_outbyobject(){
rightkey_lb='null';
//alert(rightkey_lb);
//alert('null');
}
/*********************************************************************************************************************************************
Function: oncontextmenu
Description: 获取XY坐标，在此坐标处显示右键菜单
by fangcaoju
*********************************************************************************************************************************************/
//当用户使用鼠标右键单击客户区打开上下文菜单时触发函数
document.oncontextmenu=function (){
if(contextmenu!=null){
contextmenu.style.display="none"
}
var ss;//控制右键的内容
ss=rightkey_lb;
if(ss!=null){
var index=ss.indexOf("_");
ss=ss.substr(0,index);
contextmenu=document.getElementById('contextmenu_'+ss);
if(contextmenu!=null){
//定位 id 为 contextmenu 的层的 X 坐标到鼠标单击时的 X 坐标偏右10象素
event_x=event.x;
contextmenu.style.posLeft= document.body.scrollLeft+event_x ;
//定位 id 为 contextmenu 的层的 Y 坐标到鼠标单击时的 Y 坐标偏下10象素
event_y=event.y;
contextmenu.style.posTop= document.body.scrollTop+event.y
//以行内元素方式显示 contextmenu 层
contextmenu.style.display="inline" ;
document.getElementById('show_x').innerHTML ='x='+event_x;
document.getElementById('show_y').innerHTML ='y='+event_y;
document.getElementById('shebei_id').innerHTML ='设备ID='+sxt_cur;
return false //返回 false，以屏蔽真正的右键菜单的显示
}
else{
return false //不做任何操作
}
}
else{
return false //不做任何操作
}
}
/*********************************************************************************************************************************************
Function: onclick
Description: 当用户用鼠标左键单击客户区时触发
avtive_obj: 左键单击的对象Id 值add_sxt为增加 del_sxt为删除 两值为右键菜单操作的固定Id
by fangcaoju
*********************************************************************************************************************************************/
document.onclick=function(){//当用户用鼠标左键单击客户区时触发函数
var avtive_obj=document.activeElement.id;
//alert(avtive_obj);
//alert(sxt_cur);
if(document.activeElement!=contextmenu)
{
if(contextmenu!=null){ //屏蔽初次点左键
contextmenu.style.display="none" //隐藏 contextmenu 层
switch(avtive_obj)
{
case 'add_sxt':
add_proc(); //增加操作
break;
case 'del_sxt':
alert(sxt_cur);
var sxt_cur_obj=document.getElementById(sxt_cur);
if(sxt_cur_obj ){
sxt_cur_obj.style.display='none';
}else{}
break;
case 'move_sxt':
//执行move_proc函数
break;
default:
//什么也不做
}
sxt_quit();
}
else
{}
}
}
/*********************************************************************************************************************************************
Function: add_proc
Description: 增加设备的操作
jkproc_obj： 监控设备对象
by fangcaoju
*********************************************************************************************************************************************/
function add_proc(jkproc_obj){
contextmenu.style.display="none"
var jkproc_obj;
jkproc_obj=document.getElementById('jk_proc');
if(jkproc_obj!=null)
{
jkproc_obj.style.display='block';
jkproc_obj.style.top=event_y+'px';//改变摄像头的上
jkproc_obj.style.left=event_x+'px';//改变摄像头的左
//打开一个新的窗口
//测试完恢复window.showModelessDialog("list.html","a","center:no;dialogLeft:100px;dialogTop:100px;scroll:0;status:0;help:0;resizable:0;dialogWidth:500px;dialogHeight:500px");
}
else{alert(无设备);}
add_proc_cont( jkproc_obj);
}
/*添加商铺图片*/
function add_proc_cont(jkproc_obj){
// var picproc_obj;
picproc_obj=document.getElementById('add_dt_tool');
if(picproc_obj!=null)
{
picproc_obj.style.display='block';
picproc_obj.style.top=event_y+20+'px';//改变摄像头的上
picproc_obj.style.left=event_x+10+'px';//改变摄像头的左
//打开一个新的窗口
//测试完恢复window.showModelessDialog("list.html","a","center:no;dialogLeft:100px;dialogTop:100px;scroll:0;status:0;help:0;resizable:0;dialogWidth:500px;dialogHeight:500px");
}
else{alert(无设备);}
}
function del_proc_cont(){
// var picproc_obj;
picproc_obj=document.getElementById('add_dt_tool');
if(picproc_obj!=null)
{
picproc_obj.style.display='none';
}
else{alert(无设备);}
jkproc_obj=document.getElementById('jk_proc');
if(jkproc_obj!=null)
{
jkproc_obj.style.display='none';
}
else{alert(无设备);}
}
function sxt_select(zhi){
sxt_cur=zhi.id;
// alert(sxt_cur);
}
function sxt_quit(){
sxt_cur=null;
}
/*********************************************************************************************************************************************
Function: move_proc
Description: 移动设备的操作
move_arr: 数组类型，要移动的设备ID数组
by fangcaoju
*********************************************************************************************************************************************/
function move_proc(move_arr){
var arrln=move_arr.length;
var right_btm=document.getElementById('move_sxt')
if(move_state==false)
{
right_btm.innerHTML ="固定模式";
move_state=true;
}
else
{
right_btm.innerHTML ="移动模式";
move_state=false;
}
for(var i=0; i<arrln; i++)
{
//alert(move_arr[i]);
var sxt_cur_obj=document.getElementById(move_arr[i]);
var sxt_cur_cls=sxt_cur_obj.className;
if(sxt_cur_obj){
var state_move_index=sxt_cur_cls.lastIndexOf(' '); //根据空格进行分隔，取出最后一个空格的值，注：页内的class='类名空格' 例class="jk_proc "
var state_move_sxt=sxt_cur_cls.substr(0,state_move_index+1);
if(move_state){
sxt_cur_obj.className=state_move_sxt+' dragme';
//alert(sxt_cur_obj.className);
}else
{
//alert(state_move_sxt);
sxt_cur_obj.className=state_move_sxt;
//alert('id='+sxt_cur+' x='+event_x+' y='+event_y+' left='+sxt_cur_obj.style.left +' top='+sxt_cur_obj.style.top );
}
}
else{}
}
}
/*********************************************************************************************************************************************
Function: commit
Description: 移动鼠标后的单击提交方法
move_state: 移动模式ture/固定模式falue
by fangcaoju
*********************************************************************************************************************************************/
function commit(move_id){
//alert('移动状态'+isdrag);
if(move_state && ismove==move_id.id )
{
alert('请提交到数据库的3个值：设备ID='+move_id.id+' 设备x坐标＝'+move_id.style.left+' 设备y坐标＝'+move_id.style.top);
ismove=false;
}
else
{
//none;
}
}
--------------------------------------------------------------------------------------------------------pic_move.js---------------------------------------------------------------------------------------------------
/*********************************************************************************************************************************************
Description: 图片的自由移动
by fangcaoju
*********************************************************************************************************************************************/
var ie=document.all;
var nn6=document.getElementById && !document.all;
var isdrag=false;
var x,y;
var dobj;
var ismove;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
ismove=dobj.id;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
var move_cls=fobj.className; //要移动的obj的className
move_cls=move_cls.substr(move_cls.length-6);
//alert(move_cls);
while (fobj.tagName != topelement && move_cls != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (move_cls=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
-----------------------------------------------------------------------------------------------------------imges------------------------------------------------------------------------------------------------------------
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
