禁止鼠标拖动图片的代码（鼠标不能拖动图片）

今天给各位分享禁止鼠标拖动图片的代码的知识，其中也会对鼠标不能拖动图片进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、canvas 什么情况下禁止拖动
• 2、FIREFOX中 如何 禁止鼠标拖拽图片
• 3、flashCS3 Actionscript 2.0 鼠标单击时停止拖动图片
• 4、DW制作网页，下面代码如何修改才能使鼠标放在滚动图片上时就停止滚动？
• 5、flashCS3 Actionscript 2.0 鼠标单击时无法停止拖动图片

canvas 什么情况下禁止拖动

Canvas在我的理解中就好像在一张画布上绘制图像，它只能看到却“摸”不到，那要如何进行操作呢。我不知道网上是怎么做的，这里用自己的想法做了个DEMO分享给大家。

思路：

虽然Canvas不能拖拽，但div可以拖拽，那怎么把二者结合起来呢。初步想法是将一个与Canvas图像大小差不多的div覆盖在其上，在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。

既然要覆盖，先做些准备工作：

1.将div与Canvas画布均position:absolute，否则无法重叠。

2.将div的z-index值设置大点，保证其在Canvas画面之上。

准备工作完成后，我们先来看div的拖拽：

var divObj=document.getElementById("cover");

var moveFlag=false;

divObj.onmousedown=function(e){

moveFlag=true;

var clickEvent=window.event||e;

var mwidth=clickEvent.clientX-divObj.offsetLeft;

var mheight=clickEvent.clientY-divObj.offsetTop;

document.onmousemove=function(e){

var moveEvent=window.event||e;

if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px";

divObj.onmouseup=function(){

moveFlag=false;

}

}

}

};

来解读下这段代码：首先获取div对象，设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动，当onmouseup时为false表示不能拖动了。

var clickEvent=window.event||e;

var mwidth=clickEvent.clientX-divObj.offsetLeft;

var mheight=clickEvent.clientY-divObj.offsetTop;

这三行代码是为了修正光标位置。当点击时，记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。如果不加修正：

这就是不加修正的结果，当光标点下时，div的坐标即左上角会与光标坐标一致。

修正后：

点击时光标总会“粘”在div某点上。

接下来绘制图片：

首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。

var ctx=document.getElementById("myCanvas").getContext("2d");

var img=document.getElementById("myImg");

function drawImg(){

ctx.clearRect(0,0,1000,500);

ctx.beginPath();

ctx.drawImage(img,X,Y);

ctx.closePath();

ctx.stroke();

}

window.onload=function(){

setInterval(drawImg,1);

}

获取“画笔”，获取图片对象。这里setInterval循环执行绘制图片的函数，以刷新图片的位置，setInterval的间隔值越小，拖拽起来越“流畅”。

同时别忘了clearRect，当图片移动到下一个位置时，清除上一个位置的图片，参数为Canvas画布的坐标和尺寸。

在拖拽时将修正后的光标坐标传给X、Y：

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight;

最后加上div和图像的活动范围：

if(moveEvent.clientX=mwidth){

divObj.style.left=0+"px";

X=0;

}

if(parseInt(divObj.style.left)+divObj.offsetWidth =1000){

divObj.style.left=1000 - divObj.offsetWidth+"px";

X=1000 - divObj.offsetWidth;

}

if(moveEvent.clientY=mheight){

divObj.style.top=0+"px";

Y=0;

}

if(parseInt(divObj.style.top)+divObj.offsetHeight=500){

divObj.style.top=500-divObj.offsetHeight+"px";

Y=500-divObj.offsetHeight;

}

这个就看个人的要求了，注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小，如果是在整个页面里活动就换成innerWidth或innerHeight。

彻底隐藏div看看效果：

最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。

这里有个比较简单的办法，定义一个clickFlag默认为false,当onmousedown时设为true，若进行了onmousemove事件时设为false。

在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。

整理后的JS代码：

// 绘制图片坐标

var X=0;

var Y=0;

// js部分

var divObj=document.getElementById("cover");

var moveFlag=false;

//区别moueseup与click的标志

var clickFlag=false;

// 拖拽函数

divObj.onmousedown=function(e){

moveFlag=true;

clickFlag=true;

var clickEvent=window.event||e;

var mwidth=clickEvent.clientX-divObj.offsetLeft;

var mheight=clickEvent.clientY-divObj.offsetTop;

document.onmousemove=function(e){

clickFlag=false;

var moveEvent=window.event||e;

if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px";

//// 将鼠标坐标传给Canvas中的图像

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight;

//// 下面四个条件为限制div以及图像的活动边界

if(moveEvent.clientX=mwidth){

divObj.style.left=0+"px";

X=0;

}

if(parseInt(divObj.style.left)+divObj.offsetWidth =1000){

divObj.style.left=1000 - divObj.offsetWidth+"px";

X=1000 - divObj.offsetWidth;

}

if(moveEvent.clientY=mheight){

divObj.style.top=0+"px";

Y=0;

}

if(parseInt(divObj.style.top)+divObj.offsetHeight=500){

divObj.style.top=500-divObj.offsetHeight+"px";

Y=500-divObj.offsetHeight;

}

divObj.onmouseup=function(){

moveFlag=false;

if(clickFlag){

alert("点击生效");

}

}

}

}

};

FIREFOX中 如何 禁止鼠标拖拽图片

您好！很高兴为您答疑！

一般就是用这个：document.ondragstart=function() {return false;}

您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

flashCS3 Actionscript 2.0 鼠标单击时停止拖动图片

冲突了

设个变量 判断是否处于拖动中

点击的时候判断变量

DW制作网页，下面代码如何修改才能使鼠标放在滚动图片上时就停止滚动？

在marquee标签里添加onMouseOver="this.stop()" onMouseOut="this.start()"即可。

onmouseover="this.stop()指的是当你的鼠标移到你定义好的对象时.该对象会停止当前的动作。

onmouseout="this.start()指的是当你的鼠标移开你定义好的对象时,该对象会重新刚才的动作。

代码如下，可以实现你说的当鼠标房子图片上停止滚动的效果。

marquee  onMouseOver="this.stop()" onMouseOut="this.start()" behavior="scroll" direction="left" bgcolor="#FFFFFF" loop="-1" scrollamount="1" scrolldelay="1" style="12"

flashCS3 Actionscript 2.0 鼠标单击时无法停止拖动图片

首先，你这个应该是as1.0语法了。

on()是放在影片剪辑上的动作，以下是无关拖动的执行(可以删除)：

obj="/d3";

if (_droptarget == obj) {

setProperty("",_x,getProperty(obj,_x));

setProperty("",_y,getProperty(obj,_y));

_root.m3 = 1;

if ((_root.m1 == 1) and (_root.m2 == 1) and (_root.m3 == 1)

and (_root.m4 == 1) and (_root.m5 == 1) and (_root.m6 == 1)

and (_root.m7 == 1) and (_root.m8 == 1) and (_root.m9 == 1)) {

_root.gotoAndPlay(2);

}

}

基本的意思就是：当你把这张图片拖放到"d3"的位置，执行_root.m3 = 1;后面的条件。 象obj="/d3";这类语法已经几乎不使用了。

关于禁止鼠标拖动图片的代码和鼠标不能拖动图片的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。