Comments (10)
请问具体的问题是什么?vdd-list
和 vddl-draggable
的回调说明具体看文档吧。
from vddl.
我拖动当前的vddl-draggable。只会触发当前的vddl-draggable,还是所有的vddl-draggable呢。
<template>
<div class="vue-component">
<div v-for="list in lists">
<vddl-list :list="list" :horizontal="false">
<vddl-draggable v-for="(item, index) in list" :key="item.id" :draggable="item" :index="index"
:wrapper="list" effect-allowed="copy" :moved="moved()" :cancelled="cancelled()"
:dragstart="dragstart()" :dragend="dragend()" :selected="selected()">
{{item.name}}
</vddl-draggable>
</vddl-list>
</div>
</div>
</template>
我回调是写在template和methods里面。
methods: {
moved: function () {
console.log('moved');
},
cancelled: function () {
console.log('cancelled');
},
dragstart: function () {
console.log('dragstart');
},
dragend: function () {
console.log('dragend');
},
selected: function () {
console.log('selected')
}
}
from vddl.
触发你拖动的那个元素
from vddl.
我回调方法都是写在 vddl-draggable
里面的,譬如 :moved="moved()"
。写法上是不是不正确。我看了您的文档。里面直说回调的方法。没有说如何调用的。
from vddl.
看看这个 simple demo
from vddl.
老哥,是 :moved="moved()"
和 :moved="moved"
的区别。后者就对了。我之前使用的是前者。我在您的 simple demo
里面。将回调方法 :dragstart="handleDragstart
替换成 :dragstart="handleDragstart()
也会出现我的问题。但是,这两个的写法不是应该一样的嘛?
from vddl.
你的写法,在初始化的时候,就会被执行,而作为callback,是从vddl内部在对应阶段时触发,所以你只需要传入方法名即可。
from vddl.
嗯。我这边又有个疑问。
在 vddl-list
加上 :drop="handleDrop"
的callback。元素就无法拖拽到另外的一边了。在 simple demo
中也有这样的问题。
from vddl.
如果添加了这个回调,那么vddl内部不会帮你裁剪数组,只会返回一些数据,这个操作需要你自己进行。
from vddl.
@hejianxian
好的。非常感谢您的耐心解答。
from vddl.
Related Issues (20)
- How can I make a drag element also be a dropzone? HOT 1
- Ugly Flickering effect? HOT 3
- code HOT 12
- 怎么一个seleted状态的元素进行拖拽排序后还存在这个状态
- Item disappears when moved to last last position. HOT 1
- vdd-list dragover回调函数为什么会触发多次 HOT 1
- Uncaught TypeError: Cannot read property 'splice' of undefined
- How do I get the column name where I'm moving the card?
- 有bug,元素在disabled-if等于false的情况下被拖动,并且会消失
- Update the version of vddl on NPM
- Clickable tags
- How to drag and drop smooth?
- demo page not opening HOT 1
- How to add a background image/icon in drop area?
- How to stub the vddl components?
- 不支持QQ浏览器?
- Canceling drop not working
- With active drag and drop
- inserted is not being triggered when rearranging items inside container
- Vue.js 3 support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vddl.