template
<draggable v-model="fileList" @update="fileDragEnd" v-bind="dragOptions">
<transition-group tag="ul" class="fileList">
<li v-for="(item,ins) in fileList" :key="ins"></li>
</transition-group>
</draggable>
script
import draggable from 'vuedraggable'
export default({
name:'drag',
data () {
return {
fileList: [],
dragOptions: { forceFallback: true, animation: 100, sort: false }
components: {
draggable
methods:{
fileDragEnd (evt) {
console.log(evt)
参数详解
以上内容仅作简易使用drag功能参考,vuedraggable还支持很多参数和属性,下面贴一下部分属性,若有需要建议参考官方文档:
Vue.Draggable https://github.com/SortableJS/Vue.Draggable
Sortable https://github.com/SortableJS/Sortable
@update="update"
@change="change"
@start="start"
@end="end"
:move="move"
update(evt) {
console.log(evt)
change(evt) {
console.log(evt)
start(evt) {
console.log(evt)
end(evt) {
console.log(evt)
evt.item
evt.to
evt.from
evt.oldIndex
evt.newIndex
move(evt, originalEvent) {
console.log(evt)
console.log(originalEvent)
group: "name",
sort: true,
delay: 0,
touchStartThreshold: 0,
disabled: false,
store: null,
animation: 150,
handle: ".my-handle",
filter: ".ignore-elements",
preventOnFilter: true,
draggable: ".item",
ghostClass: "sortable-ghost",
chosenClass: "sortable-chosen",
dragClass: "sortable-drag",
dataIdAttr: 'data-id',
forceFallback: false,
fallbackClass: "sortable-fallback",
fallbackOnBody: false,
fallbackTolerance: 0,
scroll: true,
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... },
scrollSensitivity: 30,
scrollSpeed: 10,
slot
使用footer插槽在vuedraggable组件内添加不可拖动的元素。重要:它应该与可拖动选项一起使用,以标记可拖拽元素。注意,在默认情况下,页脚槽将始终被添加
<draggable v-model="myArray" :options="{draggable:'.item'}">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="footer" @click="addPeople">Add</button>
</draggable>
安装npm i -S vuedraggable页面引用import draggable from 'vuedraggable'简易使用template<draggable v-model="fileList" @update="fileDragEnd" v-bind="dragOptions"> <transition-group tag="ul" clas...
经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https://github.com/RubaXa/Sor...官方DEMO:http://sortablejs.github.io/Sortable
支持触屏设备和大部分浏览器(IE...
draggable区域内嵌入多层,要把拖拽区域加上class名称,draggable=‘.class名’,这样就能确保draggable内部分可以拖拽,部分不能拖拽
el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题,那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.
最近在做关于后台管理的项目,后台模板基础框架使用的是layui前端框架http://www.layui.com/。layui的表格渲染还是蛮好用的但是无法使用jQuery UI里的排序功能。下面是一个完美契合layui表格行拖动的插件,复制粘贴引入到jQuery文件的下方就可以使用
* Sortable
* @author RubaXa <trash@rub...
录屏软件:screenToGif (将视频转为Gif,我认为简单又好操作)
我深知,文字的感知不如图片,图片的感知不如视频,所以希望在每一次的记录中,都有种收货与喜悦,虽然以前用过这个插件,相当强大的插件,但第一次从0到1,所以记录美好时刻~
1.多列之间想要互相拖动
要有相同的name,如:name:'site'
2.多列直接想要拷贝,不移除
这是大佬的博客 https://blog.csdn.net/zjiang1994/article/details/79809687
里面对vue.draggable的一些方法和属性,进行了详解,非常的详细,比官网的还要详细哦!给大佬点赞!!!
这是vue.draggable的官网 https://www.itxst.com/vue-draggable/jirneq6b.html
如图,想要实现这样的效果,左侧列表有一堆框框,要把左侧的列表拖拽到右侧列表,然后就去了官网
官网列子 未拖拽之前是这样的
import hljs from 'highlight.js'
hljs.highlightCode = function () {
//自定义highlightCode方法,将只执行一次的逻辑去掉
let blocks = document.querySelectorAll('pre code');
[].forEach.call(blocks, hljs.highlightBlock);
[/code]
就完了吗,不用 Vue.use(hljs); 类似这样吗
组件里面直接 hljs.highlightCode() 就报错了