js实现图片拖拽效果_js怎么实现一个拖拽事件

『壹』 js中如何拖动DIV中的图片

代码放出来看抄看

是不是冒袭泡和捕获的问题
试试简单的，看看点击图片时 div上的onclick事件有没有被触发

// 看起来是使用 jquery ,代码贴完整些吧，
this.mousedown(function(){
中this是指向什么对象都没看出来

//加一个 return false
//另外 event.offsetX 并不兼容 firefox

$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");
return false;
}

})

『贰』原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小

见证奇迹的时刻到了：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<style>
*{
margin:0;
padding:0
}

.box{
position:absolute;
top:100px;
left:100px;
}

/*四边*/
.box.t,
.box.b,
.box.l,
.box.r{
position:absolute;
z-index:1;
background:#666;
}

.box.l,
.box.r{
width:10px;
height:100%;
cursor:col-resize;
}

.box.t,
.box.b{
width:100%;
height:10px;
cursor:row-resize;
}

.box.t{
top:0;
}

.box.b{
bottom:0;
}

.box.l{
left:0;
}

.box.r{
right:0;
}

/*四角*/
.box.tl,
.box.bl,
.box.br,
.box.tr{
width:20px;
height:20px;
position:absolute;
background:#CCC;
z-index:2;
cursor:nwse-resize
}

.box.tl,
.box.bl{
left:-5px;
}

.box.tr,
.box.br{
right:-5px;
}

.box.br,
.box.bl{
bottom:-5px;
}

.box.tl,
.box.tr{
top:-5px;
}

.box.tr,
.box.bl{
cursor:nesw-resize;
}

/*图片*/
img{
width:100%;
height:100%;
}
</style>
<script>

window.onload=function(){
varoDiv=document.getElementsByTagName('div')[0];
oDiv.style.width='500px';
varaSpan=oDiv.getElementsByTagName('span');
for(vari=0;i<aSpan.length;i++){
dragFn(aSpan[i]);
}

functiondragFn(obj){
obj.onmousedown=function(ev){
varoEv=ev||event;

varoldWidth=oDiv.offsetWidth;
varoldHeight=oDiv.offsetHeight;
varoldX=oEv.clientX;
varoldY=oEv.clientY;
varoldLeft=oDiv.offsetLeft;
varoldTop=oDiv.offsetTop;

document.onmousemove=function(ev){
varoEv=ev||event;

if(obj.className=='tl'){
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='bl'){
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
oDiv.style.bottom=oldTop+(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='tr'){
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='br'){
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
oDiv.style.bottom=oldTop+(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='t'){
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='b'){
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.bottom=oldTop-(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='l'){
oDiv.style.height=oldHeight+'px';
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
}
elseif(obj.className=='r'){
oDiv.style.height=oldHeight+'px';
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
}
};

document.onmouseup=function(){
document.onmousemove=null;
};
returnfalse;
};
}

};
</script>
</head>

<body>
<divclass="box">
<spanclass="r"></span>
<spanclass="l"></span>
<spanclass="t"></span>
<spanclass="b"></span>
<spanclass="br"></span>
<spanclass="bl"></span>
<spanclass="tr"></span>
<spanclass="tl"></span>
<imgsrc="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/730-350-0.jpg">
</div>
</body>
</html>

『叁』高分！！用js在div里创建了一个iframe，实现拖拽，用鼠标拖拽时很卡而且向下拖拽有问题，这是什么回事

没搞懂你objWin是什么意思，全部改成td后才能成功移动，感觉并不卡。
<div id="td"></div>
<script>
td.onmousedown = function () {//鼠标按下
this.style.cursor = "move"; //设置鼠标样式
var d = document;
a = window.event; //按下时创建一个事件
var x = a.clientX - document.body.scrollLeft - td.offsetLeft; //x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
var y = a.clientY - document.body.scrollTop - td.offsetTop; //y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
d.onmousemove = function () {//鼠标移动
a = window.event; //移动时创建一个事件
td.style.left = a.clientX + document.body.scrollLeft - x;
td.style.top = a.clientY + document.body.scrollTop - y;
};
d.onmouseup = function () {//鼠标放开
td.style.cursor = "normal"; //设置放开的样式
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>

『肆』关于js拖拽

『伍』 js怎么实现一个拖拽事件

javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select 选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．
获取鼠标移动信息

第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了:
Java代码收藏代码
document.onmousemove = mouseMove;

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

你首先要声明一个evnet对象．不论何时你移动鼠标／点击／按键等等，会对应一个event的事件．在Internet Explorer里event是全局变量，会被存储在window.event里．在firefox中，或者其他浏览器，event事件会被相应的自定义函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove会获取鼠标移动事件．

(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值．在MSIE下ev是空的，所以ev将设置为window.event.

因为我们在这篇文章中需要多次获取鼠标坐标，所以我们设计了mouseCoords这个函数，它只包含了一个参数，就是the event.

我们需要运行在MSIE与Firefox为首的其他浏览器下．Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置．如果你有一个500*500的窗口，而且你的鼠标在正中间，那么paegX和pageY将是250，当你将页面往下滚动500px，那么 pageY将是750.此时pageX不变，还是250.

MSIE和这个相反，MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置，并不是文档．当我们有一个 500*500的窗口，鼠标在正中间，那么clientX与clientY也是250，如果你垂直滚动窗口到任何位置，clientY仍然是250，因为相对ie窗口并没有变化．想得到正确的结果，我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性．最后，由于MSIE 并没有0,0的文档起始位置，因为通常会设置2px的边框在周围，边框的宽度包含在document.body.clientLeft与 clientTop这两个属性中，我们再加入这些到鼠标的位置中．

很幸运，这样mouseCoords函数就完成了，我们不再为坐标的事操心了．

捕捉鼠标点击

下次我们将知道鼠标何时点击与何时放开．如果我们跳过这一步，我们在做拖拽时将永远不知道鼠标移动上面时的动作，这将是恼人的与违反直觉的．

这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove，这样看起来很象我们会获取document.onmousedown与document.onmouseup．但是当我们获取 document.onmousedown时，我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性，所以我们设置函数来获取我们需要移动的对象．
移动一个元素

我们知道了怎么捕捉鼠标移动与点击．剩下的就是移动元素了．首先，要确定一个明确的页面位置，css样式表要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位，可以用相对位置来定位了．我们将鼠标的移动全部相对页面top-left，基于这点，我们可以进行下一步了．

当我们定义item.style.position='absolute'，所有的操作都是改变left坐标与top坐标，然后它移动了．
Java代码收藏代码
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
ev = ev || window.event;

var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
var left = 0;
var top = 0;

while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}

left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};
}

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;

return false;
}
}
function mouseUp(){
dragObject = null;
}

function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}

你会注意到这个代码几乎是前面的全集，将前面的合在一起就实现了拖拽效果了．

当我们点击一个item时，我们就获取了很多变量，如鼠标位置，鼠标位置自然就包含了那个item的坐标信息了．如果我们点击了一个20*20px图像的正中间，那么鼠标的相对坐标为{x:10,y:10}．当我们点击这个图像的左上角那么鼠标的相对坐标为 {x:0,y:0}.当我们点击时，我们用这个方法取得一些鼠标与图片校对的信息．如果我们不能加载页面item，那么信息将是document信息，会忽略了点击的item信息．

mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回 item相对页面左上角的坐标，如果我们尝试获取item.offsetLeft或者item.style.left，那么我们将取得item相对与父级的位置，不是整个document．所有的脚本我们都是相对整个document，这样会更好一些．

为了完成getPosition任务，必须循环取得item的父级，我们将加载内容到item的左／上的位置．我们需要管理想要的top与left列表．

自从定义了mousemove这个函数，mouseMove就会一直运行．第一我们确定item的 style.position为absolute，第二我们移动item到前面定义好的位置．当mouse点击被释放，dragObject被设置为 null，mouseMove将不在做任何事．
Dropping an Item

前面的例子目的很简单，就是拖拽item到我们希望到的地方．我们经常还有其他目的如删除item，比如我们可以将item拖到垃圾桶里，或者其他页面定义的位置．

很不幸，我们有一个很大的难题，当我们拖拽，item会在鼠标之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我们拖拽一个item到垃圾桶上，鼠标信息还在item上，不在垃圾桶上．

怎么解决这个问题呢？有几个方法可以来解决．第一，这是以前比较推荐的，我们在移动鼠标时item会跟随鼠标，并占用了mouseover/mousemove等鼠标事件，我们不这样做，只是让item跟随着鼠标，并不占用mouseover等鼠标事件，这样会解决问题，但是这样并不好看，我们还是希望item能直接跟在mouse下．

另一个选择是不做item的拖拽．你可以改变鼠标指针来显示需要拖拽的item，然后放在鼠标释放的位置．这个解决方案，也是因为美学原因不予接受．

最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，我们需要定义我们需要释放目标的列表，当鼠标释放时，手工去检查释放的位置是否是在目标列表位置上，如果在，说明是释放在目标位置上了．

Java代码收藏代码
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/

var dropTargets = [];

function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}

function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

for(var i=0; i<dropTargets.length; i++){
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);

if(
(mousePos.x > targPos.x) &&

(mousePos.x < (targPos.x + targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}

dragObject = null;
}

鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x)，而且还要符合条件(mousePos.x<(targPos.x + targWidth))．如果所有的条件符合，说明指针确实在范围内，可以执行drop指令了．

Pulling It All Together

最后我们拥有了所有的drag/drop的脚本片断！下一个事情是我们将创建一个DOM处理．
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面，它可以用户记录一个list(列表)，定为一个导航窗口在左边或者右边，或者更多的函数你可以想到的．

下一步我们将通过"假代码"让reader看到真代码，下面为推荐:

1、当document第一次载入时，创建dragHelper DIV.dragHelper将给移动的item加阴影．真实的item没有被dragged，只是用了insertBefor和appendChild来移动了，我们隐藏了dragHelper

2、有了mouseDown与mouseUp函数．所有的操作会对应到当到iMouseDown的状态中，只有当mouse左键为按下时iMouseDown才为真，否则为假．

3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器．任何参数(containers)将通过CreatedcragContainer进行重组与序列化，这样可以自由的移动．CreateDragContainer函数也将item进行绑定与设置属性．

4、现在我们的代码知道每个item的加入，当我们移动处mouseMove，mouseMove函数首先会设置变量target，鼠标移动在上面的item，如果这个item在容器中(checked with getAttribute):

* 运行一小段代码来改变目标的样式．创造rollover效果
* 检查鼠标是否没有放开，如果没有
o 设置curTarget代表当前item
o 记录item的当前位置，如果需要的话，我们可以将它返回
o 克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.
o item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．
o 抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．
* 如果没有，不需要做任何事，因为这不是一个需要移动的item

5、检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作：

* 开始移动带有阴影的item，这个item就是前文所创建的
* 检查每个当前容器中的container，是否鼠标已经移动到这些范围内了
o 我们检查看一下正在拖动的item是属于哪个container
o 放置item在一个container的某一个item之前，或者整个container之后
o 确认item是可见的
* 如果鼠标不在container中，确认item是不可见了．

『陆』 THREE.js如何实现在x,y,z轴上的拖拽

THREE.js实现在x,y,z轴上的拖拽需要用户注册拖拽控件。

1、注册的js代码如下：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://raw.github.com/zz85/ThreeLabs/master/DragControls.js';
document.body.appendChild(script);
script.onload = function(){
var dragcontrols = new THREE.DragControls(camera, scene, renderer.domElement);
};

2、运行效果如下：

说明：以上每一个点都可以自由拖拽。

『柒』如何使用js实现拖拽功能

这次给大家带来如何使用js实现拖拽功能，使用js实现拖拽功能的注意事项有哪些，下面就是实战案例，一起来看一下。
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。
1.onmousedown：鼠标按下事件
2.onmousemove：鼠标移动事件
3.onmouseup：鼠标抬起事件
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
基本思路如下：
拖拽状态 = 0鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}部分实例代码：
HTML部分
<p class="calculator" id="drag">**********</p>CSS部分
calculator {
position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/
display: block;
width: 218px;
height: 280px;
cursor: move; /*鼠标呈拖拽状*/
}JS部分
window.onload = function() {
//拖拽功能(主要是触发三个事件：)
var drag = document.getElementById('drag');
//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
drag.onmousedown = function(e) {
var e = e || window.event; //兼容ie浏览器
var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
var diffY = e.clientY - drag.offsetTop;
/*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条，
解决方法是采用ie浏览器独有的2个方法setCapture() eleaseCapture(),这两个方法，
可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候，
限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/
if(typeof drag.setCapture!='undefined'){
drag.setCapture();
}
document.onmousemove = function(e) {
var e = e || window.event; //兼容ie浏览器
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移动时重新得到物体的距离，解决拖动时出现晃动的现象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
};
document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动
this.onmousemove = null;
this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
//修复低版本ie bug
if(typeof drag.releaseCapture!='undefined'){
drag.releaseCapture();
}
};
};
};相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
vue做出手机发送短信验证码注册功能

如何使用Angular上线一个组件

导航:首页 > 编程语言 > js实现图片拖拽效果

js实现图片拖拽效果

与js实现图片拖拽效果相关的资料

友情链接