dragula.js拖拽源码以及案例下载资源-CSDN文库

共28个文件

js：18个

svg：3个

png：3个

需积分: 16 138 浏览量 2018-02-25 11:49:03 上传评论收藏 107KB RAR 举报

**dragula.js 拖拽库详解** `dragula.js` 是一个轻量级的JavaScript库，专门用于实现拖放功能。它具有简洁的API，强大的兼容性，并且支持包括移动端在内的各种平台。这个库的设计目标是让开发者能够快速、方便地在网页上创建出流畅的拖放体验。 ### 1. 功能特性 - **简单易用**：`dragula.js` 的API设计简洁，只需要几行代码就能实现基本的拖放功能。 - **跨平台**：不仅适用于桌面端浏览器，还兼容移动端设备，提供一致的用户体验。 - **高度自定义**：可以通过事件监听和回调函数进行定制，满足各种复杂的交互需求。 - **良好的兼容性**：在多种现代浏览器以及旧版浏览器中都表现出优秀的兼容性。 - **响应式设计**：与响应式布局配合良好，使得拖放元素能够在不同屏幕尺寸下工作。 ### 2. 使用方法 #### (1) 引入库你需要在HTML文件中引入`dragula.js`。通常，你可以通过CDN或者将文件下载到本地后引用： ```html <script src="path/to/dragula.min.js"></script> ``` #### (2) 创建拖放容器创建拖放容器非常简单，只需选择你要拖放的元素，并调用`dragula()`方法： ```javascript var containers = document.querySelectorAll('.my-containers'); var drake = dragula(containers); ``` 在这个例子中，`'.my-containers'`是CSS选择器，用于选取所有的拖放容器。 ### 3. 事件处理 `dragula.js` 提供了一系列事件来监听拖放过程中的各个阶段，例如`drag`、`drop`、`cancel`等。通过这些事件，你可以实现自定义的行为： ```javascript drake.on('drop', function(el, target, source) { console.log('元素 ' + el.id + ' 被放置到 ' + target.id); }); ``` ### 4. 配置选项 `dragula.js` 允许你配置拖放行为，例如是否允许在同一容器内移动元素，或者是否允许跨容器拖放： ```javascript var options = { mirrorContainer: document.body }; var drake = dragula(containers, options); ``` ### 5. 示例与案例下载的`dragula-master`压缩包中可能包含示例代码和测试页面，这些可以帮助你更好地理解和应用`dragula.js`。通过查看和运行这些示例，你可以了解如何根据自己的需求调整和扩展拖放功能。 ### 6. 扩展与维护 `dragula.js` 的源码清晰、易于理解，如果你需要对库进行自定义或者扩展，可以查看源码并进行修改。同时，保持关注官方更新和社区讨论，以便获取最新的功能和修复。 `dragula.js` 是一个强大而灵活的拖放解决方案，无论你是初次尝试拖放功能，还是寻求优化现有应用的拖放体验，它都能为你提供有效的帮助。结合实际项目需求，利用`dragula.js` 可以轻松实现直观、流畅的拖放操作。

资源推荐

资源详情

资源评论

收起资源包目录

dragula-master.rar （28个子文件）

dragula-master

example

example.min.js 16KB

example.js 1KB

example.css 3KB

test

events.js 9KB

end.js 2KB

remove.js 2KB

drag.js 10KB

cancel.js 3KB

defaults.js 967B

containers.js 1KB

classes.js 2KB

drake-api.js 1KB

lib

events.js 297B

destroy.js 3KB

public-api.js 206B

index.html 10KB

classes.js 684B

resources

patreon.svg 520B

logo.svg 8KB

icon.png 15KB

eyes.png 51KB

logo.png 25KB

icon.svg 2KB

dist

dragula.min.js 11KB

dragula.min.css 466B

dragula.css 548B

dragula.js 64KB

dragula.js 17KB

<!doctype html> <meta charset='utf-8'> <link rel="shortcut icon" href="favicon.ico"> <link href='dist/dragula.css' rel='stylesheet' type='text/css' /> <link href='example/example.css' rel='stylesheet' type='text/css' /> <title>dragula</title> <h3 class='tagline'><span class='tagline-text'>Drag and drop so simple it hurts</span></h3> <div class='examples'> <div class='parent'> <label for='hy'>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label> <div class='wrapper'> <div id='left-defaults' class='container'> <div>You can move these elements between these two containers</div> <div>Moving them anywhere else isn't quite possible</div> <div>Anything can be moved around. That includes images, <a href='#'>links</a>, or any other nested elements. <div class='image-thing'><img src='resources/icon.svg' onerror='this.src="resources/icon.png"' alt='dragula'/></div><sub>(You can still click on links, as usual!)</sub> </div> </div> <div id='right-defaults' class='container'> <div>There's also the possibility of moving elements around in the same container, changing their position</div> <div>This is the default use case. You only need to specify the containers you want to use</div> <div>More interactive use cases lie ahead</div> <div>Moving <code><input/></code> elements works just fine. You can still focus them, too. <input placeholder='See?' /></div> <div>Make sure to check out the <a href='#'>documentation on GitHub!</a></div> </div> </div> <pre> <code> dragula([document.getElementById(left), document.getElementById(right)]); </code> </pre> </div> <div class='parent'> <label for='hy'>There are plenty of events along the lifetime of a drag event. Check out <a href='#'>all of them</a> in the docs!</label> <div class='wrapper'> <div id='left-events' class='container'> <div>As soon as you start dragging an element, a <code>drag</code> event is fired</div> <div>Whenever an element is cloned because <code>copy: true</code>, a <code>cloned</code> event fires</div> <div>The <code>shadow</code> event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position</div> <div>A <code>drop</code> event is fired whenever an element is dropped anywhere other than its origin <em>(where it was initially dragged from)</em></div> </div> <div id='right-events' class='container'> <div>If the element gets removed from the DOM as a result of dropping outside of any containers, a <code>remove</code> event gets fired</div> <div>A <code>cancel</code> event is fired when an element would be dropped onto an invalid target, but retains its original placement instead</div> <div>The <code>over</code> event fires when you drag something over a container, and <code>out</code> fires when you drag it away from the container</div> <div>Lastly, a <code>dragend</code> event is fired whenever a drag operation ends, regardless of whether it ends in a cancellation, removal, or drop</div> </div> </div> <pre> <code> dragula([document.getElementById(left), document.getElementById(right)]) .on('drag', function (el) { el.className = el.className.replace('ex-moved', ''); }).on('drop', function (el) { el.className += ' ex-moved'; }).on('over', function (el, container) { container.className += ' ex-over'; }).on('out', function (el, container) { container.className = container.className.replace('ex-over', ''); }); </code> </pre> </div> <div class='parent'> <label for='hy'>Need to be able to quickly delete stuff when it spills out of the chosen containers? Note how you can easily sort the items in any containers by just dragging and dropping.</label> <div class='wrapper'> <div id='left-rm-spill' class='container'> <div>Anxious Cab Driver</div> <div>Thriving Venture</div> <div>Such <a href='http://ponyfoo.com'>a good blog</a></div> <div>Calm Clam</div> </div> <div id='right-rm-spill' class='container'> <div>Banana Boat</div> <div>Orange Juice</div> <div>Cuban Cigar</div> <div>Terrible Comedian</div> </div> </div> <pre> <code> dragula([document.getElementById(single)], { removeOnSpill: true }); </code> </pre> </div> <div class='parent'> <label for='hy'>By default, dropping an element outside of any known containers will keep the element in the last place it went over. You can make elements go back to origin if they're dropped outside of known containers, too.</label> <div class='wrapper'> <div id='left-rollbacks' class='container'> <div>Moving items between containers works as usual</div> <div>If you try to drop an item outside of any containers, though, it'll retain its original position</div> <div>When that happens, a <code>cancel</code> event will be raised</div> </div> <div id='right-rollbacks' class='container'> <div>Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers</div> <div>This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises</div> </div> </div> <pre> <code> dragula([document.getElementById(left), document.getElementById(right)], { revertOnSpill: true }); </code> </pre> </div> <div class='parent'> <label for='hy'>Copying stuff is common too, so we made it easy for you.</label> <div class='wrapper'> <div id='left-copy' class='container'> <div>When elements are copyable, they can't be sorted in their origin container</div> <div>Copying prevents original elements from being dragged. A copy gets created and <em>that</em> gets dragged instead</div> <div>Whenever that happens, a <code>cloned</code> event is raised</div> </div> <div id='right-copy' class='container'> <div>Note that the clones get destroyed if they're not dropped into another container</div> <div>You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.</div> </div> </div> <pre> <code> dragula([document.getElementById(left), document.getElementById(right)], { copy: true }); </code> </pre> </div> <div class='parent'> <label for='hy'>Copying stuff from only one of the containers and sorting on the other one? No problem!</label> <div class='wrapper'> <div id='left-copy-1tomany' class='container'> <div>When elements are copyable, they can't be sorted in their origin container</div> <div>Copying prevents original elements from being dragged. A copy gets created and <em>that</em> gets dragged instead</div> <div>Whenever that happens, a <code>cloned</code> event is raised</div> <div>Note that the clones get destroyed if they're not dropped into another container</div> <div>You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.</div> </div> <div id='right-copy-1tomany' class='container'> </div> </div> <pre> <code> dragula([document.getElementById(left), document.getElementById(right)], { copy: function (el, source) { return source === document.getElementById(left) }, accepts: function (el, target) { return target !== document.getElementById(left) } }); </code> </pre> </div> <div class='parent'> <la

评论收藏

内容反馈