oldObj : null ,
obj : null ,
moveObjName : null ,
isBoxDragable:false ,
tx:0,
ty:0,
tx1:0,
ty1:0,
arrayTemplateLayout: null ,
arrayTemplateStyle : null ,
mapTemplateObject : new Map(),
contextId : "context1",
objectId:"",
ifremeObj : null ,
dragbox : null ,
dragboxId : "dragbox",
occupation : "occupation",
isImageObject : false,
getDragBox : function(){
if(!this.dragbox){
this.dragbox = hs.createElement(
'div',
{
id: ''
},
null
);
this.dragbox.innerHTML = '<div id="dragbox" style="visibility:hidden;position: absolute;left:192px;top:330px;background:#ffffff;width:55px; height:31px" ></div>' ;
document.body.appendChild(this.dragbox);
}
return this.dragbox.firstChild ;
},
loadTemplateInfo : function(){
this.arrayTemplateLayout = new Array();
this.arrayTemplateStyle = new Array();
this.searchObjectTag(document.getElementById(this.contextId));
},
makeRateBoxBarHandler : function(){
try{
var e = dragable.makeRateBoxBarHandler.arguments[0];
var obj = dragable.makeRateBoxBarHandler.arguments[1];
var tmpobj = obj ;
while(tmpobj.id.indexOf("_fordrag") == -1 && !this.isBoxDragable)
tmpobj = tmpobj.parentNode ;
if(!this.isBoxDragable && ! tmpobj ){
BoxUtils.makeRateBoxHandler(e,obj);
return false ;
}
else{
this.obj = tmpobj ;
if(!this.isBoxDragable)
this.objectId = tmpobj.attributes.getNamedItem("objectid")?
tmpobj.attributes.getNamedItem("objectid").nodeValue:"";
}
}catch(e1){
BoxUtils.makeRateBoxHandler(e,obj);
return false ;
}
//ele.abc123=34;
if (e.type == 'mousedown') {
if(this.isBoxDragable){
this.rateBoxBarMouseUp(e);
return false ;
}
hs.addEventListener(document, 'mousemove', this.rateBoxBarMouseMoveHandler);
}else if(e.type == 'mouseup' ){
if(this.isBoxDragable)
this.rateBoxBarMouseUp(e);
else
hs.removeEventListener(document,"mousemove",this.rateBoxBarMouseMoveHandler);
}
e=e||window.event;
if(e.preventDefault ==null){
e.preventDefault = function () { this.returnValue = false; };
}
if(e.stopPropagation ==null){
e.stopPropagation = function () { this.returnValue = false; };
}
e.preventDefault();
Event.stop(e);
},
rateBoxBarMouseMoveHandler : function(e){
if(dragable.isBoxDragable){
dragable.getDragBox().style.cursor="move";
dragable.getDragBox().style.left= (dragable.tx- dragable.tx1+pointeurX(e)) +"px";
dragable.getDragBox().style.top = (dragable.ty- dragable.ty1+pointeurY(e)) +"px";
var x = parseInt(dragable.getDragBox().style.left);//pointeurX(e);
var y = parseInt(dragable.getDragBox().style.top);//pointeurY(e);
if(dragable.isTemplateObject){
var nodes = dragable.oldObj.parentNode.childNodes ;
for(var a = 0 ;a < nodes.length ; a++){
if(nodes[a].tagName!="DIV") continue ;
if(nodes[a] == dragable.oldObj) continue ;
var p = hs.position(nodes[a]);
if(x>p.x && y > p.y && x < (p.x+nodes[a].offsetWidth) && y < (p.y + nodes[a].offsetHeight)){
nodes[a].style.width = nodes[a].firstChild.offsetWidth +"px";
nodes[a].style.height = nodes[a].firstChild.offsetHeight +"px";
dragable.oldObj.innerHTML = nodes[a].innerHTML ;
dragable.oldObj.style.border="";
dragable.oldObj.style.width = dragable.oldObj.firstChild.offsetWidth +"px";
dragable.oldObj.style.height = dragable.oldObj.firstChild.offsetHeight +"px";
nodes[a].innerHTML = "?";
nodes[a].style.border="1px solid #000000";
//if(nodes[a].attributes.getNamedItem("index")){
// var t = dragable.oldObj.attributes.getNamedItem("index").nodeValue ;
// dragable.oldObj.attributes.getNamedItem("index").nodeValue =
// nodes[a].attributes.getNamedItem("index").nodeValue ;
// nodes[a].attributes.getNamedItem("index").nodeValue = t ;
//}
dragable.oldObj =nodes[a];
}
}
}
}else{
dragable.rateBoxBarInit_123456(e);
}
e=e||window.event;
if(e.preventDefault ==null){
e.preventDefault = function () { this.returnValue = false; };
}
if(e.stopPropagation ==null){
e.stopPropagation = function () { this.returnValue = false; };
}
e.preventDefault();
},
findPlugin : function(obj){
var list = this.mapTemplateObject.getKeyList();
for(var i = 0 ; i< list.length ; i++){
if(list[i].value.compareObject(obj) != -1)
return list[i].value;
}
return -1 ;
},
rateBoxBarMouseUp : function(e){
//var ele = document.getElementsByName("object");
var x = parseInt(dragable.getDragBox().style.left);//pointeurX(e);
var y = parseInt(dragable.getDragBox().style.top);//pointeurY(e);
var ele = this.arrayTemplateLayout ;
if(ele == null){
dragable.loadTemplateInfo();
ele = this.arrayTemplateLayout ;
}
if(dragable.ifremeObj != null && dragable.isImageObject){
var p = hs.position(dragable.ifremeObj);
if(x>p.x && y > p.y && x < (p.x+this.ifremeObj.offsetWidth) && y < (p.y + this.ifremeObj.offsetHeight)){
bus_design.isInsertImage(null,dragable.getDragBox().firstChild.src);
dragable.getDragBox().innerHTML = " ?";
dragable.isBoxDragable = false ;
hs.removeEventListener(document,"mousemove",this.rateBoxBarMouseMoveHandler);
dragable.getDragBox().style.visibility="hidden";
return ;
}
}
for(var i = ele.length -1 ; i >= 0; i--){
//if(ele[i].attributes.getNamedItem("objects").nodeValue==dragable.occupation)
// continue ;
if(ele[i] == null) continue ;
var p = hs.position(ele[i]);
//document.getElementById("memo").innerHTML = x+"/"+y+"/"+p.x +"/"+ p.y +"/"+(p.x+ele[i].offsetWidth)+"/"+ (p.y + ele[i].offsetHeight);
if(x>p.x && y > p.y && x < (p.x+ele[i].offsetWidth) && y < (p.y + ele[i].offsetHeight)){
//ele[i].innerHTML="drag into OK...";
try{
if(ele[i].firstChild.attributes.getNamedItem("name").nodeValue.indexOf("HtmlEdit") != -1){
if(ele[i].firstChild.tagName =="IFRAME" ){
if(dragable.isImageObject)
bus_design.isInsertImage(ele[i],dragable.getDragBox().firstChild.src);
}else if(!dragable.isImageObject)
if(window.confirm('偙咱僆僽仆僃僋僩傪徚偟偰怴偟偄僆僽仆僃僋僩傪擖傟偰傛傠偟偄偱偟效偆偐丠')==1){
dragable.findPlugin(ele[i]).destroyObject(ele[i]);
if(dragable.mapTemplateObject.get(dragable.objectId)){
dragable.mapTemplateObject.get(dragable.objectId).init(ele[i]);
}
}
}else if(ele[i].firstChild.tagName=="IMG"){
if(window.confirm('偙咱僆僽仆僃僋僩傪徚偟偰怴偟偄僆僽仆僃僋僩傪擖傟偰傛傠偟偄偱偟效偆偐丠')==1){
dragable.findPlugin(ele[i]).destroyObject(ele[i]);
if(dragable.mapTemplateObject.get(dragable.objectId)){
dragable.mapTemplateObject.get(dragable.objectId).init(ele[i]);
}
}
}
}catch(e){
if(dragable.mapTemplateObject.get(dragable.objectId)){
dragable.mapTemplateObject.get(dragable.objectId).init(ele[i]);
}
}
break ;
}
}
if(this.isTemplateObject){
dragable.oldObj.style.border="";
dragable.oldObj.innerHTML=dragable.getDragBox().innerHTML;
dragable.oldObj.style.width = dragable.oldObj.firstChild.offsetWidth +"px";
dragable.oldObj.style.height = dragable.oldObj.firstChild.offsetHeight +"px";
dragable.isTemplateObject = false ;
bus_stack.refreshArray();
}
dragable.getDragBox().innerHTML = " ?";
dragable.isBoxDragable = false ;
hs.removeEventListener(document,"mousemove",this.rateBoxBarMouseMoveHandler);
dragable.getDragBox().style.visibility="hidden";
},
rateBoxBarInit_123456 : function(e){
var tmpBarHtml = new Array();
try{
this.isImageObject = false ;
this.isTemplateObject = false ;
if(this.obj.id.indexOf("img_") != -1)
this.isImageObject = true ;
else if(this.obj.id.indexOf("template_") != -1)
this.isTemplateObject = true ;
this.getDragBox().className = this.obj.className ;
this.getDragBox().innerHTML = this.obj.innerHTML;
this.getDragBox().style.width = this.obj.offsetWidth +"px";
this.getDragBox().style.height = this.obj.offsetHeight +"px";
this.getDragBox().style.zIndex = 99999;
if(this.isTemplateObject){
this.obj.style.border="1px solid #000000";
this.obj.style.width = this.obj.firstChild.offsetWidth+"px";
this.obj.style.height = this.obj.firstChild.offsetHeight+"px";
this.obj.innerHTML="?";
}
var p = hs.position(this.obj);
if(!hs.ie){
p.y -= this.obj.parentNode.scrollTop;
p.x -= this.obj.parentNode.scrollLeft;
p.y -= document.body.scrollTop ;
p.x -= document.body.scrollLeft ;
}
this.getDragBox().style.left = p.x+"px";
this.getDragBox().style.top = p.y+"px";
this.getDragBox().style.visibility="visible";
this.tx = p.x ;
this.ty = p.y ;
this.tx = this.tx?this.tx : 0 ;
this.ty = this.tx?this.ty : 0 ;
this.tx1 = (pointeurX(e));
this.ty1 = (pointeurY(e));
this.isBoxDragable = true ;
this.oldObj = this.obj ;
}catch(e){
hs.removeEventListener(document,"mousemove",this.rateBoxBarMouseMoveHandler);
this.isBoxDragable = false ;
}
},
searchObjectTag : function (obj){
if(obj != null && obj.childNodes != null){
var ele = obj.childNodes ;
for(var i = 0 ; i < ele.length ; i++){
try{
if(ele[i].attributes.getNamedItem("objects") != null){
this.arrayTemplateLayout[this.arrayTemplateLayout.length] = ele[i];
this.arrayTemplateStyle[this.arrayTemplateStyle.length] = ele[i].style.border ;
}
this.searchObjectTag(ele[i]);
}catch(e){ }
}
}
}
};
var BoxUtils ={
obj : null ,
tx : 0 ,
ty : 0 ,
tx1 : 0 ,
ty1 : 0 ,
makeRateBoxHandler : function(e,obj){
if(obj.style.cursor !="move")
return ;
try{
while(obj.id.indexOf("_formove") == -1 && obj.name !="closeImage")
obj = obj.parentNode ;
}catch(e){
return false ;
}
if(obj.name == "closeImage") return false ;
this.obj = obj ;
//this.mapkey = root.attributes.getNamedItem("name").nodeValue ;
if (e.type == 'mousedown') {
var p = hs.position(obj);
this.tx = p.x
this.ty = p.y
this.tx = this.tx?this.tx : 0 ;
this.ty = this.tx?this.ty : 0 ;
this.tx1 = pointeurX(e);
this.ty1 = pointeurY(e);
hs.addEventListener(document, 'mousemove', this.boxMouseMoveHandler);
}else if(e.type == 'mouseup' ){
hs.removeEventListener(document,"mousemove",this.boxMouseMoveHandler)
}
e=e||window.event;
if(e.preventDefault ==null){
e.preventDefault = function () { this.returnValue = false; };
}
if(e.stopPropagation ==null){
e.stopPropagation = function () { this.returnValue = false; };
}
e.preventDefault();
},
boxMouseMoveHandler : function(e){
//document.getElementById(RateUtils.moveObjName).style.cursor="move";
BoxUtils.obj.style.left= (BoxUtils.tx- BoxUtils.tx1+pointeurX(e)) +"px";
BoxUtils.obj.style.top = (BoxUtils.ty- BoxUtils.ty1+pointeurY(e)) +"px";
//BoxUtils.obj.style.zIndex = 88888;
//if(hs.ie)
//setBackiframe(parseInt(BoxUtils.obj.style.left),parseInt(BoxUtils.obj.style.top),
// BoxUtils.obj.firstChild.offsetWidth,BoxUtils.obj.firstChild.offsetHeight,1000,true);
e=e||window.event;
if(e.preventDefault ==null){
e.preventDefault = function () { this.returnValue = false; };
}
if(e.stopPropagation ==null){
e.stopPropagation = function () { this.returnValue = false; };
}
e.preventDefault();
}
};
function createDiv(html,key,visible){
if(document.getElementById('dragDiv_'+key)) return ;
var div = hs.createElement(
'div',
{
id: 'dragDiv_'+key
},
null
);
div.innerHTML = html ;
document.body.appendChild(div);
return div ;
}
這是個真實項目中的拖拽代碼。很復雜，大體思路就是選中div到某個位置後 ，在創建壹個。至於能保存下來，是因為把部分信息保存在cookie中。