您的位置:

js可拖动的代码(js规定拖动的区域)

js可拖动的代码(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; idropTargets.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.xtargetPos.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是不可见了.

js实现图片拖动代码,希望大神给代码详细的注释(解释)下。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns="" xml:lang="en"

head

meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

titleDocument/title

/head

body

div id="box1" style = 'width:100px; height: 100px; background:#ccc; position:fixed;'/div

!-- 注意 盒子一定要定位 position:fixed; 或者 position:absolute;--

/body

script type="text/javascript"

function getPos(e){//这是一个 获取鼠标位置的函数

var oEvent = e || event;

return {x: oEvent.clientX + document.documentElement.scrollLeft || document.body.scrollLeft,

y: oEvent.clientY +document.documentElement.scrollTop || document.body.scrollTop};

}

document.getElementById('box1').onmousedown = function(e){ //你要拖动对象在mousedown的时候发生的事情

var oEvent = e || event;

var pos = getPos(oEvent);

var _this = this;

_this.style.cursor = 'move';//改变鼠标状态

_this.disY = pos.y - _this.offsetTop;

_this.disX = pos.x - _this.offsetLeft;

document.onmousemove =function(e){ //在鼠标按下的时候 并且 移动的时候 发生的事情

var oEvent = e || event;

var dpos = getPos(oEvent);

var t = dpos.y-_this.disY ; //移动的时候获取的 移动 top值

var l = dpos.x-_this.disX ;//移动的时候获取的 移动 left

_this.style.top=t + "px"; //这两条给盒子赋值

_this.style.left=l + "px";

};

document.onmouseup = function(){//鼠标弹起的时候做的事情 一些释放 操作

_this.style.cursor = 'pointer'

this.onmousemove = null;

this.onmouseup = null;

try{

_this.releaseCapture();}catch(e){}

};

try{

_this.setCapture();}catch(b){} //这里是为了 让盒子拖动的时候不要复制页面里面的其他内容

return false;

};

/script

/html

js实现div的拖拽

div id="c" onmousedown="mm(event);"123123/div

evt参数是就是上面的event对象;

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

因为火狐不支持直接获取event对象.因此FF在触发拖拽事件前需要明确传递event.

IE则不需要.所以才出现 e = evt || event; 主要是兼容所用.

e.clientX是获取当前鼠标的横坐标.

js鼠标拖动div

你的obj.style.left是获取不到的因为该div没有设置style属性所以只要将样式改为行内就行了

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    title文哥讨厌IE/title

/head

body

    div id="over" onmousedown="down(this,event)" style="width:100px;height:30px;background:red;position:absolute;left:20px;top:500px;" onmousemove="move(this,event)" onmouseup="seup(this,event)"

        

    /div

script type="text/javascript"

    var posX,posY;

    var downX,downY;

    var mark=false;

    function down(obj,event)

    {

        obj.style.cursor="move";

        posX=obj.style.left;

        posY=obj.style.top;

        downX=event.clientX;

        downY=event.clientY;

        mark=true;

        ///alert(posX);

        ///alert(posY);

    }

    function move(obj,event)

    {

        var moveX=event.clientX;

        var moveY=event.clientY;

        if (mark) {

            obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX) + "px";

            obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";

        }

    }

    function seup(obj,event)

    {

        if (mark) {

            var moveX=event.clientX;

            var moveY=event.clientY;

            obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX)+ "px";

            obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";

            downX=moveX;

            downY=moveY;

        }

        obj.style.cursor="default";

            mark = false; 

    }

/script

/body

/html

js可拖动的代码(js规定拖动的区域)

本文目录一览: 1、js怎么实现一个拖拽事件 2、js实现图片拖动代码,希望大神给代码详细的注释(解释)下。 3、js实现div的拖拽 4、js鼠标拖动div js怎么实现一个拖拽事件 Javascr

2023-12-08
js实现鼠标拖动效果代码,java实现鼠标拖动

本文目录一览: 1、js代码实现鼠标移动到上面一个效果,鼠标离开效果保持 2、鼠标事件,js代码实现div移动功能 3、鼠标上下拖动网页的JS js代码实现鼠标移动到上面一个效果,鼠标离开效果保持 e

2023-12-08
JS拖动元素详解

2023-05-18
js代码移动鼠标,鼠标的移动

本文目录一览: 1、JS鼠标事件大全 JS鼠标事件有哪些 2、js怎么控制鼠标移动范围 3、js判断鼠标移动 4、JS语言鼠标移动触发事件的代码怎么写啊? 5、js怎么设置鼠标位置 6、js代码实现鼠

2023-12-08
js拖拽鼠标cursor(鼠标左键拖拽)

本文目录一览: 1、js鼠标拖动div 2、javascript 拖拽移动滚动条 3、js中如何拖动DIV中的图片? 4、js中sortable怎么获取拖动的东西 5、js 自定义的cursor在鼠标

2023-12-08
web中js时间滚动(js页面滚动)

本文目录一览: 1、JS实现滚动条触底加载更多 2、java web项目中js怎么取到div中滚动条的高度? 3、js如何控制整个页面滚动条的位置 4、web自动化中页面多个滚动条时的拖动操作? 5、

2023-12-08
js拖文件进文件夹,怎么把文件拖进文件夹

本文目录一览: 1、js通过ID上传文件到文件夹。求代码!! 2、一个js文件复制到项目的某个文件夹里,在vs中为什么看不到它呢? 3、javascript怎么复制文件到指定文件夹 4、js移动文件到

2023-12-08
如何将js代码隐藏在一张图片中,如何将js代码隐藏在一张图片

本文目录一览: 1、如何用JS显示图片呢? 2、服务器图片按钮在点击后怎么用js 代码隐藏自己 那位大侠能帮帮我 3、JS怎么把一张图片隐藏在另一整张图片的一部分里,点击后会展开或者弹出,然后可以在这

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
滑动代码js,滚动的代码

2022-11-24
40个js实例(js什么是实例)

本文目录一览: 1、求JS分页实例或者servlet分页实例,最好有例子能直接运行看看效果 2、js中的数组应用实例 3、JavaScript学习笔记之数组基本操作示例 4、JS隐藏号码中间4位代码实

2023-12-08
JS拖拽事件详细阐述

2023-05-23
js给div添加代码,js给div添加内容

2022-11-23
js脚本浮动窗代码怎么理解,js 浮动

本文目录一览: 1、浮动窗口的代码 (html/js) 2、怎样用javascript实现带关闭窗口的浮动广告 3、在网页中插入浮动窗口,js代码或css代码(易看易懂) 4、javascript如何

2023-12-08
图片大小自动缩放js代码(图片大小自动缩放js代码是什么)

本文目录一览: 1、怎么用js实现图片的缩小? 2、jS控制图片的放大和缩小? 3、求一个简单的点击图片放大缩小的JS代码 4、如何利用JS或者CSS样式来自动调整图片大小 5、js实现图片滚轮、按钮

2023-12-08
js实现实例例子,js基础案例

2022-11-24
js圆的代码,圆的代码怎么写

本文目录一览: 1、怎么在图片上画圆网页代码 2、javascript计算圆的周长和面积,求代码 3、javascript带参数的构造函数定义一个对象Circle(圆) 4、js 怎么设置这个圆的起始

2023-12-08
手机滑动js代码(js触摸滑动)

本文目录一览: 1、js css 怎样设置手机能滑动页面 2、手机app滑动轮播原生js怎么写 3、如何用js做到滑动效果 4、怎么用js实现类似手机切屏的左右滑动的效果 5、页面实现滑动JS代码 j

2023-12-08
html动态加载js,html动态加载div

2023-01-04
js开发代码(js代码编写)

本文目录一览: 1、如何编写高效的js代码 2、做为一名前端开发人员,有哪些值得一读的JS代码 3、Web前端新手应该知道的JavaScript开发技巧有哪些? 4、简单的js代码编程 5、前端开发,

2023-12-08