<!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
没有合适的资源?快使用搜索试试~ 我知道了~
dragula.js 拖拽源码以及案例下载
共28个文件
js:18个
svg:3个
png:3个
需积分: 16 20 下载量 52 浏览量
2018-02-25
11:49:03
上传
评论
收藏 107KB RAR 举报
温馨提示
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
共 28 条
- 1
资源评论
静静香甜
- 粉丝: 76
- 资源: 73
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功