1:界面引入<link rel="stylesheet" type="text/css" href="css/dragula.css" />样式文件;
2:界面引入<script type="text/javascript" src="js/dragula.js" ></script>JS文件;
3:dom添加类名“container”,绑定ID“sortable”;
4:如只展示前台效果:调用(dragula([document.getElementById(container)]););
5:如跟后台交互:在信息展示接口内部返回成功后,
if(data.data.imgs.length > 0) {
var scrollable = true;
var listener = function(e) {
if(!scrollable) {
e.preventDefault();
}
}
document.addEventListener('touchmove', listener, {
passive: false
});
dragula([$("#sortable")[0]], {
direction: 'horizontal',
accepts: function(el, target, source, sibling) {
return !!sibling
},
invalid: function(el, handle) {
return $(el).hasClass('add-img')
}
}).on('drag', function(el, source) {
scrollable = false
}).on('drop', function(el, source) {
scrollable = true
}).on('dragend', function(el, source) {
scrollable = true
})
}
即可。