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:hiddenposition: absoluteleft:192pxtop:330pxbackground:#ffffffwidth:55pxheight: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 >= 0i--){

//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中。

点击需要拖动元素时，获取该元素的初始位置。

鼠标移动期间 获取元素当前的位置信息

计算

进行事件监听

拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；

问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，

解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。

拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）

处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。

正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。

在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。