david-desmaisons / draggable-example

vue.draggable example

David Desmaisons

---

⚡ About

• French born, living in Brazil
• Programming since the age of 10 (saudades Amstrad CPC 6128).
• I may accept freelance opportunities if related to Vue.js or Neutronium.
• Always curious and learning new languages/ algorithms/ concepts/ frameworks .
• If I am looking for some piece of software that I can not find, I may end up implementing and publishing it as a github repository.

🚀Main projects

• Neutronium a C# framework to build .NET MVVM desktop applications using HTML, CSS and javascript.
• RateLimiter a C# client-side rate limiting utility.
• ComposableAsync A framework to create, compose and inject asynchronous behaviors in .Net Framework and .Net Core. Including a circuit breaker and an in process actor model.
• CodeDependencyScanner A C# application to visualize and interact with .Net assembly objects (class, interface, enum, struct) and their dependencies.
• Vue.Draggable and vue.draggable.next components that handle drag-and-drop.
• Vue.D3.tree a component to display tree based on D3.js layout.
• Vue.D3.sunburst a sunburst component based on D3.js.
• 📈 vue-plotly a wrapper for plotly.js.
• 🛠️ vue-cli-plugin-component a vue-cli 3 plugin to create component.
• 🛠️ ComponentFixture an Interactive sandox playground for vue components.
• Vue.Resize a directive to detect resize events.

🔭Currently

• Improving Vue.D3.sunburst

☕ Others

• 🖋 I wrote an article about using slot for behaviors in vue.js.
• ☕If one of my repo has helped you, especially if you are using it in production, please consider making a donation.

draggable-example's Issues

Get the Id of new and old index

Suppose I have a table with tr

<draggable :element="'tbody'" @EnD = "onEnd">

{{ offer.id }}

What I need is to get the id of the dragged element as well as the id of destination. Any ideas on this?

QQ浏览器不支持拖拽

QQ浏览器不支持拖拽

Can you control the drag boundary

table move multiple rows

hello, I want to move several lines together if you want the same movement, how can I do this?

Example (move group 1 all together)
tr-1
tr-1.1
tr-1.2
tr-2
tr-3
tr-3.1

thanks

Compatibility with Element's tree component?

Hi David:

I stumbled on your work, downloaded it - looking really cool.

Before spending too much time researching it on my end - do you know if your library can be used with Element's tree component (http://element.eleme.io/#/en-US/component/tree)?

Many thanks,

Fabrice.

Drag the element by dragging particular icon/section

Hey Folks,
@David-Desmaisons
This is one of the best package developed for VueJS Drag-drop feature.

I am not sure that whether it's possible with draggable for below feature.

Example:
Referring your example GIF.
https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif

If I drag by using pin icons, then only it should be dragged not by entire element.

Let me know if need any further details in this regards.

when list2(array) modify.

please talk me when list2(array) modify.

Browser Query

Was just trying to run the examples, getting error:
ERROR in Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
@ ./~/bootstrap/dist/css/bootstrap.css 4:14-73 13:2-17:4 14:20-79

Any help?

is it possible to click on icon in the list to drag ? not the entire list click

now it is like we can click on list to drag and drop!
but....
can i click on an icon in the list to drag?

<draggable class="list-group" element="ul" v-model="lists" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false"> <transition-group type="transition" :name="'flip-list'"> <div class="icon-list selected" v-for="list in lists" :key='list.order'> <!-- some code --> <i class="faa fa-android></i> </div> </transition-group> </draggable>

in above code we can click any part of div to drag
i want to drag using an icon in it.

Disable drop but enable drag out

Hello.
Firts of all : Nice job! Works very easy.
Now to my question:
I have 2 lists, one with available people, and one with subscribed persons.
in the subscribed-persons, i have a maximum amount of allowed subscriptions. When this amount is reached, I want to disable drop on that list. but I want to still be able to drag persons out of this list.
if I do like this:
:options="{group:'persons', disabled: subscribedPersons.length == maxSubscriptions}
I cant drop any more users in it, but the problem is that then I can't remove any person from this list either.
I did it programmatically with the :move binding. Is there a better way to do it?

Can you help me here?
Thanks a lot

can share example sort by order

you can share a line code like this example in https://david-desmaisons.github.io/draggable-example/

i want know how can change order ?