hilongjw / vue-dragging Goto Github PK

View Code? Open in Web Editor NEW

766.0 23.0 145.0 396 KB

A sortable list directive with Vue

Home Page: http://hilongjw.github.io/vue-dragging/

License: MIT License

JavaScript 76.27% HTML 23.73%

vue

vue-dragging's Introduction

Awe-dnd

Makes your elements draggable in Vue.

See Demo: http://hilongjw.github.io/vue-dragging/

Some of goals of this project worth noting include:

support desktop and mobile
Vue data-driven philosophy
support multi comb drag
Supports both of Vue 1.0 and Vue 2.0

Requirements

Vue: ^1.0.0 or ^2.0.0

Install

From npm:

$ npm install awe-dnd --save

Usage

//main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

<!--your.vue-->
<script>
export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  },
  /* if your need multi drag
  mounted: function() {
      this.colors.forEach((item) => {
          Vue.set(item, 'isComb', false)
      })
  } */
}
</script>

<template>
  <div class="color-list">
      <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
  </div>
</template>

API

v-dragging="{ item: color, list: colors, group: 'color' }"

Arguments:

{item} Object
{list} Array
{group} String
{comb} String

group is unique key of dragable list.

comb use for multi drag

Example

<!-- Vue2.0 -->
<div class="color-list">
    <div
        class="color-item"
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
        :key="color.text"
    >{{color.text}}</div>
</div>

<!-- Vue1.0 -->
<div class="color-list">
    <div
        class="color-item"
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
        track-by="text"
    >{{color.text}}</div>
</div>

Event

<div class="color-list">
    <div
        class="color-item"
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData, comb: 'isComb' }"
        :key="color.text"
    >{{color.text}}</div>
</div>

export default {
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on('dragend', () => {

    })
  }
}

License

The MIT License

vue-dragging's People

Contributors

Stargazers

Watchers

Forkers

lamb2014 leslieyq daiyichen kidzhy snapline jsvr violacase xieduowei andyoung mngogo jerroldlee fzrobbin itsky365 webmi looknd marvincreate mykeyb2004 zeromake 1514louluo kinsey77 anhzhi punkmoon dzhuo devenc cluo ylily nailfar pl2476 lilisheng 2984397010 erictop3 imamthis yu3ver demon1110 libin1991 won21kr sctaofelix yuannianfeng shinygang erimons-chan aiqin-bao careycui edenspark paulkn acbv12 jiang-xiche narci2010 tennessine 195440 jzxyouok ldlovexys 464884492 binsinger meiseayoung i255979 tiantian8144 abramwang lingyuchen salormoom qitunshanhe barusu firecodes qimm leonwuv jjyyshao yangyfeng shixued 13810874921 zhishaofei3 ccj-mlp liangzuan1983 caihongyuwml notlogic shuyigengyun vinieo mvpleung xielizhen durofei 724899020 wu-xuebin-007 weaps andyqiu1 daimingchun yanpengpengpeng 724400475 hhy5277 bb-cloud yg214862959 xjx79 smallkure bestjhh da-dong-dong 643104191 1070591579 javacrayzer treezhou jianlidmeng tiantongxue1216 phpjavac lcsi

vue-dragging's Issues

this.$dragging.$on('dragend', () => { }) 为什么不起作用啊；我想监测拖拽结束的时候触发

如题 this.$dragging.$on('dragend', () => { }) 为什么不起作用啊；

拖拽左侧的列表到非列表区域后，再拖拽或点击删除都失效，js报错

demo--http://www.wheelsfactory.cn/#/detail?id=13
在这个链接进去后，拖拽左侧的列表到非列表区域后，再拖拽或点击删除都失效，js报错。应该是没有对目标区域进行限制。

npm 包未同步更新

npm 和 github 都是0.3.0 的版本，而从npm拉下的代码却不是最新的。一些bug仍然存在

拖拽的效果不明显，在拖拽的时候是否可以更改随鼠标移动部分的样式

二次赋值后的拖拽问题

第一次帮定数据 arr = [obj1,obj2] 然后通过js修改成 arr=[obj3,obj4] 然后拖拽就失效了，调试发现第二次拖拽的时候 arr变成了 arr : [obj3,obj4,undefined]

拖拽过程怎么追踪呢，比如拖拽过程中该变被拖拽元素的样式。有类似dragmove事件吗

Is there a way to disable dragging?

Is there a way I can allow dragging only under certain conditions?

文档把这四个参数都写出来比较好，省的去源码里找了

文档把这四个参数都写出来比较好，省的去源码里找了..
draged: Current.item,
to: item,
value: DDD.value,
group: key

是否有控制元素能否拖拽的属性，项目中有一个状态是要控制元素不可拖拽的

如题，在行内设置draggable="false"也会被插件自动改为draggable="true"

想问下有没有设置经过的时候不互换位置的属性

现在是这样的我拖着一个div 经过别的div就会互换位置但我不想换这个div 我只是鼠标经过而已有没有设置属性当onmouseup的时候才互换？

Does this library support having nested sorting groups? I've tried it and it doesn't seem to work. If I drag a child group, it drags the entire parent. Is there anything that can be done to support it?

可以设置单个模块的大小吗？

支持内嵌么？

这个拖拽插件有React版本吗

这个拖拽有React版本吗，以前在这个组件基础上改成了一个文件管理器，现在项目所有组件要转React。vue-dragging部分源码还改过，卡这儿了，换用其他拖拽重写的话工程量巨大

您好，请问数组嵌套如何使用呢？

如题，数组嵌套如何使用呢？
例如：colors: [{
text: "Aquamarine",
child:[
{
text: "text1",
},
{
text: "text2",
}
]
}]
如何给child也加上拖拽排序呢？按照Demo加上v-dragging，触发了dragged跟dragend的，但是并没有排序，求楼主解答。

第一次移动被占位置的组件被移除

<div v-for="(comp,index) in displayComponents" :key="index" :is="comp" v-dragging="{item: comp, list: displayComponents, group: 'list' }"></div>

displayComponents 是组件列表

是否支持多个元素一起拖拽

修复了若干bug,以及建议

BUG

vue2 直接更新 list 时 item 对象无法同步 commit
firefox 有 text 元素会报 el.getAttribute is undefined, el.classList is undefined commit
使用相同数据替换 list ，list 数据对象无法同步 commit
如果一个页面有多个组然后发生两个不同组的 item 拖拽会报错。解决方案见下面的 Current 对象加入group识别。

建议

添加 dragend 事件回调用于排序的请求触发(后面才改名为dragend) commit
使用 key 替代 dom 元素，去除 es6 的 Map 依赖 commit
Current 对象无需每个 group 单独使用，事件回调带上group参数，事件绑定解绑优化 commit

请作者查看后需要哪些我再考虑pr

this.$dragging.$on('dragged', ({ value }) => {  
})

Is there a way to get the onDrop event that occurs when the dragged item is dropped?