关于图片拖拽时浏览器老是打开新页面的问题

[zb51500618]

我做了个图片拖拽功能 如图


在拖动时老是打开新页面搜索拖动的字符 ，目前测试 在火狐 ie 拖动时会 打开搜索页面 ，谷歌不会

不清楚怎么控制这个东西 大家帮我看看

function allowDrop(ev)
	{
	ev.preventDefault();
	 
	}

	function drag(ev)
	{  

	ev.dataTransfer.setData("Text",ev.target.id+"_"+ev.target.getElementsByTagName('input')[0].value+"_"+ev.target.textContent);
	 
	}

	function drop(ev)
	{
	var sizeid=0;
	var colourid=0;
 
	var res=ev.dataTransfer.getData("Text");
	var datas = res.split('_');
	if(datas[0]=='tuosize'){
		sizeid=datas[1];
	}
	if(datas[0]=='tuocol'){
		colourid=datas[1];
	}
	ev.preventDefault();
	 
	 var html='';
	 $.ajax({
		 type: "get",
      	   url:  getContextPath()+"/commodityImageSizeColour/saveImageColour.do",
      	   data: "ccId="+colourid+"&ciId="+ev.target.id+"&csId="+sizeid,
      	   success: function(msg){
      		   var data = msg.split('_');
      		   if(data[1]=='1'){
  	     			alert("匹配成功")	;
  	     			if(datas[0]=='tuosize'){
  	     				ev.target.parentNode.lastChild.insertAdjacentHTML("beforeEnd","<b id='size_"+data[0]+"' onclick='removeSizeTag(this)'  >"+datas[2]+"</b>");
  	     			}
  	     			if(datas[0]=='tuocol'){
  	     				$(ev.target).before("<i><img id='col_"+data[0]+"'  name='"+datas[1]+"' src='"+$("#img_"+datas[1]+"").attr("src")+"' onclick='removeTag(this)'  width='22px' height='15px'  ></img></i>");
  	     				
  	     				window.document.getElementById("col"+datas[1]).className='GrayImg';
  	     			}
      		   }else{
      			   return false;
      		   }
  	   }
	    }); 
	
	}

[zb51500618]

弹出页面指这样的

[six28]

这个好像是浏览器的默认事件，阻止下就行。不知道对不

[zb51500618]

浏览器 默认的 应该在程序里面控制 ，我就不知道这个怎么弄？ 坐等

[qq_34897965]

东西你自己写的？ drag方法里添加ev.preventDefault();

[DefinaHelper]

加入禁止冒泡的机制

[zb51500618]

引用 4 楼 qq_34897965 的回复:

东西你自己写的？ drag方法里添加ev.preventDefault();

加在drag里面拖都拖不动， 我在drop里面已经加了 ，但是并没有用

[Dene-wang]

IE通过ev.cancelBubble=true;ev.returnValue = false;来防止图片的事件，注意是放在document.onmousemove中。要用原生的JS，不能用JQUERY！ FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。 参考 IE Firefox 谷歌

[雪见仙尊]

对于图片元素 在拖动代码开始之前加: imgElement.ondragstart=function () { //很多浏览器中默认允许拖动图片到新标签页打开，要先禁止，否则影响效果。如果你要拖动的不是图片，可以去掉 return false; } imgElement变量是图片元素，你自己写一下选择器。 这是我以前做的鼠标拖动图片时写的，不影响图片拖动。demo： http://7xk7g2.com1.z0.glb.clouddn.com/%E9%BC%A0%E6%A0%87%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0.htm

[zb51500618]

引用 7 楼 DeneImp 的回复:

IE通过ev.cancelBubble=true;ev.returnValue = false;来防止图片的事件，注意是放在document.onmousemove中。要用原生的JS，不能用JQUERY！ FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。 参考 IE Firefox 谷歌

引用 8 楼 u011058701 的回复:

对于图片元素 在拖动代码开始之前加: imgElement.ondragstart=function () { //很多浏览器中默认允许拖动图片到新标签页打开，要先禁止，否则影响效果。如果你要拖动的不是图片，可以去掉 return false; } imgElement变量是图片元素，你自己写一下选择器。 这是我以前做的鼠标拖动图片时写的，不影响图片拖动。demo： http://7xk7g2.com1.z0.glb.clouddn.com/%E9%BC%A0%E6%A0%87%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0.htm

非常感谢 ,问题得到了解决 ！ 卡了好长时间