2013-05-17 1 views
0

У меня есть перетаскиваемый образ на моем сайте, который я хочу связать с другой страницей при нажатии. Проблема в том, что я не хочу, чтобы ее «щелкали», если она перетаскивается, только если она нажата и не перетащена. По-видимому, мне нужно отменить ссылку onmouseout, не так ли? Может кто-нибудь помочь с этим?Предотвратить ссылку объекта при работе при перетаскивании

Сценарий:

var dragobject={ 
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, 
initialize:function(){ 
document.onmousedown=this.drag 
document.onmouseup=function(){this.dragapproved=0} 
}, 
drag:function(e){ 
var evtobj=window.event? window.event : e 
this.targetobj=window.event? event.srcElement : e.target 
if (this.targetobj.className=="drag"){ 
this.dragapproved=1 
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} 
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} 
this.offsetx=parseInt(this.targetobj.style.left) 
this.offsety=parseInt(this.targetobj.style.top) 
this.x=evtobj.clientX 
this.y=evtobj.clientY 
if (evtobj.preventDefault) 
evtobj.preventDefault() 
document.onmousemove=dragobject.moveit 
} 
}, 
moveit:function(e){ 
var evtobj=window.event? window.event : e 
if (this.dragapproved==1){ 
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" 
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" 
return false 
} 
} 
} 

dragobject.initialize() 

Изображение:

<a href="#"><img src="image1" class="drag" STYLE="position:relative; TOP:-216px; LEFT:433px; width:60px"></a> 

ответ

0

вы можете сделать некоторые границы с ДИВ и охватывать код на что:

<style type="text/css"> 
    #cover{ 
     height:sze px;/*enter a bigger height and width than image instead of sze*/ 
     width:sze px; 
    } 
</style> 
<script type="text/javascript"> 
var dragobject={ 
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, 
initialize:function(){ 
document.onmousedown=this.drag 
document.onmouseup=function(){this.dragapproved=0} 
}, 
drag:function(e){ 
var evtobj=window.event? window.event : e 
this.targetobj=window.event? event.srcElement : e.target 
if (this.targetobj.className=="drag"){ 
this.dragapproved=1 
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} 
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} 
this.offsetx=parseInt(this.targetobj.style.left) 
this.offsety=parseInt(this.targetobj.style.top) 
this.x=evtobj.clientX 
this.y=evtobj.clientY 
if (evtobj.preventDefault) 
evtobj.preventDefault() 
document.onmousemove=dragobject.moveit 
} 
}, 
moveit:function(e){ 
var evtobj=window.event? window.event : e 
if (this.dragapproved==1){ 
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" 
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" 
return false 
} 
} 
} 
dragobject.initialize() 
</script> 
<div id="cover" class="drag" style="position:relative; TOP:-216px; LEFT:433px; width:60px"><a href="#"><img id="myimg" src="image1"></a></div> 

или вы можете изменить CSS с a js код:

<script> 
function coverage(){ 
     var img=document.getElementByid('myimg'), 
      cov=document.getElementByid('cover'), 
      imgh=img.offsetHeight(), 
      imgw=img.offsetWidth(); 
     cov.style.cssText="height:"+(imgh+50)+";width:"+(imgw+50)+";padding:3px;"; 
    } 
    window.onload=coverage; 
</script>