两款JAVASCRIPT拖拽（拖放）资源-CSDN文库

共5个文件

htm：2个

html：2个

js：1个

4星 · 超过85%的资源需积分: 9 93 浏览量 2008-11-20 11:10:53 上传评论 1 收藏 17KB RAR 举报

在JavaScript编程领域，拖放（Drag and Drop）功能是一种常见的用户交互方式，允许用户通过鼠标或触摸设备将元素从一处拖动到另一处。这两款JavaScript拖放实现提供了不同的方法来处理这种交互，有助于提高网站或应用的用户体验。在本文中，我们将探讨拖放的基本原理以及如何使用JavaScript实现这一功能。拖放功能的核心在于浏览器提供的`HTML5 Drag and Drop API`，它允许开发者定义拖动源（drag source）、放置目标（drop target）以及拖放过程中的行为。这个API包括了一系列事件，如`dragstart`、`drag`、`dragenter`、`dragleave`、`dragover`和`drop`，这些事件在拖放操作的不同阶段被触发。 1. **拖动开始（dragstart）**：当用户按下鼠标并移动时，触发`dragstart`事件。在此事件中，我们可以设置被拖动元素的数据类型和值，例如： ```javascript element.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text/plain', '拖动的数据'); }); ``` 2. **拖动过程中（drag）**：用户持续拖动时，`drag`事件会被反复触发，可以用来更新视觉效果或处理其他逻辑。 3. **进入放置目标（dragenter）**：当拖动元素进入可放置的目标元素时，触发`dragenter`。通常用于改变目标元素的样式以提示用户可以放下。 4. **离开放置目标（dragleave）**：当拖动元素离开目标元素时，触发`dragleave`，可以恢复目标元素的原始样式。 5. **拖过放置目标（dragover）**：在`dragenter`之后，如果用户继续移动，`dragover`会频繁触发。由于默认行为不允许放置，我们需要阻止其默认行为，然后允许放置： ```javascript element.addEventListener('dragover', function(event) { event.preventDefault(); }); ``` 6. **放下（drop）**：当用户释放鼠标或手指，元素被放下时，触发`drop`事件。这是执行实际放置操作的地方，通常包括将数据从`dataTransfer`对象中提取出来，并进行相应的处理： ```javascript element.addEventListener('drop', function(event) { event.preventDefault(); var data = event.dataTransfer.getData('text/plain'); // 进行数据处理... }); ``` 在压缩包中的文件，比如`Drag.htm`、`SimpleDrag.htm`、`drag_2.html`、`tuozhuai.html`、`tuozhuai.js`，可能分别演示了不同层次的拖放实现。`SimpleDrag.htm`可能提供了一个基础的拖放实例，而`tuozhuai.js`可能是对拖放功能更复杂逻辑的封装，比如支持多个元素拖放、数据序列化等。学习和理解这两个JavaScript拖放实现，可以帮助开发者掌握如何利用`HTML5 Drag and Drop API`创建自定义的拖放交互，提升Web应用的交互性和可用性。通过查看和分析源代码，可以深入理解拖放的细节，包括如何处理不同事件、设置数据、以及调整视觉反馈等。此外，对于`drag_2.html`这样的文件，可能展示了在特定场景下，如多元素拖放或拖放排序等更高级的应用。

资源推荐

资源详情

资源评论

收起资源包目录

Drag.rar （5个子文件）

drag_2.html 25KB

SimpleDrag.htm 3KB

tuozhuai.js 16KB

Drag.htm 8KB

tuozhuai.html 5KB

<!-- 【程序原理】这里以SimpleDrag为例说一下基本原理。首先初始化程序中要一个拖放对象： this.Drag = $(drag); 还要两个参数在开始时记录鼠标相对拖放对象的坐标： this._x = this._y = 0; 还有两个事件对象函数用于添加移除事件： this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop); 分别是拖动程序和停止拖动程序。拖放对象的position必须是absolute绝对定位： this.Drag.style.position = "absolute"; 最后把Start开始拖放程序绑定到拖放对象mousedown事件： addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); 鼠标在拖放对象按住，就会触发Start程序，主要是用来准备拖动，在这里记录鼠标相对拖放对象的坐标： this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; 并把_fM拖动程序和_fS停止拖动程序分别绑定到document的mousemove和mouseup事件： addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); 绑定到document可以保证事件在整个窗口文档中都有效。当鼠标在文档上移动时，就会触发Move程序了，这里就是实现拖动的程序。通过现在鼠标的坐标值跟开始拖动时鼠标相对的坐标值的差就可以得到拖放对象应该设置的left和top了： this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px"; 最后放开鼠标后就触发Stop程序结束拖放。这里的主要作用是把Start程序中给document添加的事件移除： removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); 这样一个简单的拖放程序就做好了，下面说说其他扩展和细节部分。【拖放锁定】锁定分三种，分别是：水平方向锁定(LockX)、垂直方向锁定(LockY)、完全锁定(Lock)。这个比较简单，水平和垂直方向的锁定只要在Move判断是否锁定再设置left和top就行，如果是完全锁定就直接返回。 if(!this.LockX){ this.Drag.style.left = ...; } if(!this.LockY){ this.Drag.style.top = ...; } 【触发对象】触发对象是用来触发拖放程序的。有的时候不需要整个拖放对象都用来触发，这时就需要触发对象了。使用了触发对象后，进行移动的还是拖放对象，只是用触发对象来触发拖放（一般的使用是把触发对象放到拖放对象里面）。【范围限制】要设置范围限制必须先把Limit设为true。范围限制分两种，分别是固定范围和容器范围限制，主要在Move程序中设置。原理是当比较的值超过范围时，修正left和top要设置的值使拖放对象能保持在设置的范围内。【固定范围限制】容器范围限制就是指定上下左右的拖放范围。各个属性的意思是：上(mxTop)：top限制；下(mxBottom)：top+offsetHeight限制；左(mxLeft)：left限制；右(mxRight)：left+offsetWidth限制。如果范围设置不正确，可能导致上下或左右同时超过范围的情况，所以要在Start程序中进行修正： this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); 其中mxLeft+offsetWidth和mxTop+offsetHeight分别是mxRight和mxBottom的最小范围值。根据范围参数修正移动参数： iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft); iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); 对于左边上边要取更大的值，对于右边下面就要取更小的值。【容器范围限制】容器范围限制的意思就是把范围限制在一个容器_mxContainer内。要注意的是拖放对象必须包含在_mxContainer中，因为程序中是使用相对定位来设置容器范围限制的（如果是在容器外就要用绝对定位，这样处理就比较麻烦了），还有就是容器空间要比拖放对象大，这个就不用说明了吧。原理跟固定范围限制差不多，只是范围参数是根据容器的属性的设置的。当设置了容器，会自动把position设为relative来相对定位： !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); 注意relative要在获取offsetLeft和offsetTop即设置_x和_y之前设置，offset才能正确获取值。由于是相对定位，对于容器范围来说范围参数上下左右的值分别是0、clientHeight、0、clientWidth。 clientWidth和clientHeight是容器可视部分的宽度和高度（详细参考这里）。为了容器范围能兼容固定范围的参数，程序中会获取容器范围和固定范围中范围更小的值： mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); 要注意如果在程序执行之前设置过拖放对象的left和top而容器没有设置relative，在自动设置relative时会发生移位现象，所以尽量避免没有设置relative而又设置了拖放对象left和top，才执行程序的情况。不过也有一个取巧的方法就是设置margin来代替定位（使用margin的话会自动修正，后面说明）。因为设置相对定位的关系，容器_mxContainer设置过后一般不要取消或修改，否则很容易造成移位异常。【鼠标捕获】我在一个拖放实例中看到，即使鼠标移动到浏览器外面，拖放程序依然能够执行，仔细查看后发现是用了setCapture。鼠标捕获(setCapture)是这个程序的重点，作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。使用很简单： this._Handle.setCapture(); setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。程序中主要是要捕获onmousemove和onmouseup事件。 msdn的介绍中还说到setCapture有一个bool参数，用来设置在容器内的鼠标事件是否都被容器捕获。容器就是指调用setCapture的对象，大概意思就是：参数为true时（默认）容器会捕获容器内所有对象的鼠标事件，即容器内的对象不会触发鼠标事件（跟容器外的对象一样）；参数为false时容器不会捕获容器内对象的鼠标事件，即容器内的对象可以正常地触发事件和取消冒泡。而对于容器外的鼠标事件无论参数是什么都会被捕获，可以用下面这个简单的例子测试一下（ie）： <html> <body onclick="alert(2)"> <div onmousemove="alert(1)">mouseover </div> <script>document.body.setCapture(); </script> </body> </html> 这里的参数是true，一开始body会捕获所有鼠标事件，即使鼠标经过div也不会触发onmousemove事件。换成false的话，div就可以捕获鼠标事件，就能触发onmousemove事件了。拖放结束后还要使用releaseCapture释放鼠标，这个可以放在Stop程序中： this._Handle.releaseCapture(); setCapture是ie的鼠标捕获方法，对于ff也有对应的captureEvents和releaseEvents方法。但这两个方法只能由window来调用，而且muxrwc说这两个方法在DOM2里已经废弃了，在ff里已经没用了。不过ff里貌似会自动设置取消鼠标捕获，但具体的情形就不清楚了，找不到一个比较详细的介绍，谁有这方面的资料记得告诉我啊。下面都是我的猜测，ff的鼠标捕获相当于能自动

评论收藏

内容反馈