jexordexan / vue-slicksort Goto Github PK

View Code? Open in Web Editor NEW

1.5K 24.0 156.0 2.62 MB

A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️

Home Page: http://vue-slicksort.netlify.app

License: Other

JavaScript 7.04% HTML 2.79% Vue 6.36% TypeScript 83.81%

drag grid drop vue-slicksort mixin-components sortable-helper sort animated dependency free

vue-slicksort's People

Contributors

Stargazers

Watchers

Forkers

anterioforks forks trendingtechnology alintuhut lsiten eyy anteriovieira jokerdai looknd cuulee wlheckel baozi926 pegex saki-saki andens yimengzhiqian cyshigehaohaizi liangzuan1983 chianz alejandro11k danielnice whales2333 ericmcpheron danelbert wukamm liujianglc kfukuoka yangyfeng zdxweb bruian ngangchill preterer donghaibo digitaldjpool jabo2017 nomaanp xiaoping1988 hapiben chenkanqin oslo-bestiario gorankrgovic gurindersingh eilvein spartez waspar winetertk mudenglong laden666666 hauk0101 hhy5277 tianfanfan qiushangzhe houfeng0923 jiankang-wang bilingxxf ming2050 lee66 lottid zhangzongshan sd5682295 katherineqingbo zhoujiqiu mf0wzi zhufenglesson thelliot mangowi kerasking wodemax dennyliao easwk isnicc thebaronalex mgesmundo bxy18710401602 glumb kuailingmin zhangqiangzgz madwau qiqihaobenben quandtoris qianduanying qiushuanghu tomsq philipnamehere nanshan11 mavuio ctwowt iamalicelee b-xiang yqjack finchfang xinglongjizi nocteeee 601193408 454979849 reaink summerpt eug620 nirvanachow davestewart

vue-slicksort's Issues

Cannot read property 'x' of undefined

I'm randomly getting this error after updating to version 1.1.1.

VM121882 vue-slicksort.umd.js:713
Uncaught TypeError: Cannot read property 'x' of undefined
    at VueComponent.transitionHelperIntoPlace (VM121882 vue-slicksort.umd.js:713)
    at VueComponent.boundFn [as transitionHelperIntoPlace] (VM121357 vue.esm.js:191)
    at VueComponent.handleSortEnd (VM121882 vue-slicksort.umd.js:691)
    at boundFn (VM121357 vue.esm.js:191)

It's failing here in the transitionHelperIntoPlace function.

      var targetX = -deltaScroll.left;
 >>>> if (this.translate.x > 0) {
        // Diff against right edge when moving to the right
        targetX += newIndexNode.offsetLeft + newIndexNode.offsetWidth - (indexNode.offsetLeft + indexNode.offsetWidth);
      } else {
        targetX += newIndexNode.offsetLeft - indexNode.offsetLeft;
      }

Unit tests for mixin components

We need testing. Mainly unit testing but e2e testing couldn't hurt for the actual drag and drop interactions.

Move from one list to another

Hi, is it possible to move an item from one list to another? Or from one collection to another? If so, could you give an example? 🤔

EDIT: noticed #2 so closing this. This library looks really great, looking forward for #2 to be implemented.

What conditions trigger the slip of the previous or next element when dragging up or dragging down

Hello Jexordexan,

What conditions trigger the slip of the previous or next element when dragging up or dragging down?When my sorting elements are not the same height, it is sometimes difficult to trigger the sorting of the elements. Is there a way to set the sorting of the element by dragging the dragged element up or down by 50px?

thanks.

Example that supports placeholders / gaps / blank spaces in a draggable list

Basically I'm trying to create something like this rather crude jQuery UI example.

You can drag any of the words to a free gap in any order
You can override a word with another (which returns the overridden word back to the pool)
You can drag an allocated word back to the pool leaving the gap open as it was
You can remove a word once it is allocated to a gap using the close button

I've looked at the examples, but it seems like they don't allow "blank" items to exist.

Does anyone know of an example that supports this, or have an idea how it can be achieved with this library?

Update or remove gitter channel.

It is 404 page. I guess it is deleted.

Typescript support.

This can be nice. A type definition file.

SCSS & SASS disappearing when sorting problem

Hello Jexordexan,

Awesome project!
I found out that when you use SASS or SCSS for your markup, that slicksort won't be able to find the right css config. You kinda addressed this issue here:
"Item disappearing when sorting / CSS issues"
But I think this is worth noting.
So a quick example:

Template list:

'<ul class="input-list"><slot /></ul>'

Template item:

'<li class="draggable">{{item}}</li>'

SCSS:

.input-list {
  .draggable {
    cursor: pointer;
  }
}

Now when dragging the newly made <li> will be in <body> and won't be able to find .draggable because it's nested.

This isn't really an issue but maybe it's worth telling users.

Greetings Dimitri

The distance props can't work on the mobile

Hi, when I use distance props on the mobile device, the item can't move.

I see this code has some problems.

vue-slicksort/src/ContainerMixin.js

Line 101 in 62a6b2b

this._pos = {

this._pos = {
    x: e.pageX,
    y: e.pageY,
};

fix

this._pos = {
    x: e.touches ? e.touches[0].pageX : e.pageX,
    y: e.touches ? e.touches[0].pageY : e.pageY, 
};

//or
this._pos = this.getOffset(e);

Native click events don't work on ElementMixin components

As noted by @johnfraney in #9:

in version 0.1.5 that items with the ElementMixin no longer register click events. Maybe the CSS fix is the safer option.

Reverting the earlier commit and replacing with the prefixed css rules is the appropriate fix. I will be adding autoprefixer to the storybook webpack config.

Standalone Slicksort component

This could behave similarly to the <draggable> component in vuedraggable Where there is one component with a slot for it's children, which have been iterated using v-for.

I set the lockAxis="xy", then have some problem. I hope you can reslove my ploblem. thanks

Can you implement the grid drag like the react sortable's grid drag.

I am using Vue framework , and I have a demand , that is grid layout . It's need drag and drop and sorting ... base image.

I hope your vue-slicksort can reslove my problem as soon as possible. thank you.

Standalone drop component

I'm new to the Vue ecosystem and what strikes me is the lack of a good "drop component". All half decent solutions seem to be sortable-only, but I'm really looking for a way to also be able to designate a component as a simple drop target. I'm posting this as a request here because I think this is currently the nicest component for dragging in the ecosystem and it would be great if this could turn into a full fledge drag 'n drop solution, where draggable, droppable and sortable could be mixed as needed.

[Feature Request] Programmatically swap elements

If not exist, this would be very useful.

ForEx.

instance.swap(index, index)

Problems when dragging down

Hello Jexordexan,

I found a problem that when the heights of the sorted elements are not equal, dragging the higher-height elements downwards will cause problems where the position of the lower-height elements cannot be replaced. Fortunately, dragging up will not cause the problem.

For example, https://jexordexan.github.io/vue-slicksort/ Simple list,set the height of item1 to 300px, the height of item2 to be the same, the height of item3 to 300px, and then drag item1 downwards, you will not replace the position of item2 in item1, because item3 first slides up.

Cheers.

[Feature request] Make v-handle directive reactive

I'm tweaking my drag & drop feature for both desktop and mobile users. As part of this I'm currently using the handle only on mobile (where users don't have a lot of room to pan), and disabling the handle usage on larger screens (by setting :use-drag-handle="false" when the viewport gets bigger).

This works pretty excellently right now. However, I would actually prefer to also use the handle directive also on larger screens: I have some interactive elements in my list items that I would prefer to never trigger the drag. I don't think I can currently do this, as I would have to set :use-drag-handle always to true, and then add more v-handles that I actually don't want to use on small screens.

My immediate thought was that if I could simply bind v-handle to any value I wanted, I would have the control I need to choose exactly which handles I want to be active at any given time. In my case, I would set v-handle="false" or v-handle="true" depending on screen size, like I already do with the parent parameter.

There are probably other ways to work around the issue in my case as well, I can provide a deeper explanation and snippets if needed.

report error when i use v-handle

[Vue warn]: Injection "manager" not found

found in

---> at src/pages/choose/batchMgr.vue
at src/pages/choose/index.vue
at src/App.vue

[Vue warn]: Missing required prop: "index"

found in

---> at src/pages/choose/batchMgr.vue
at src/pages/choose/index.vue
at src/App.vue

raven.min.js:2 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'add' of undefined"

found in

---> at src/pages/choose/batchMgr.vue
at src/pages/choose/index.vue
at src/App.vue
a.(anonymous function)
TypeError: Cannot read property 'add' of undefined(…)

Drag elements between collections

I'm logging this as it is bound to be a popular request.

At this time there are lots of assumptions made about the dragging staying scope only within a single collection.

Draggin elements between collections (and possibly between containers) could take a while to figure out.

This will be a 0.2.x feature

useWindowAsScrollContainer=true but the windowContainer does not scroll

There are two situations here.
1.Use listcontainer(the height is less than window height), useWindowAsScrollContainer=true, the result is view has no scrolling changes,but sorting can happen;
2.The height of SlickList component is auto, useWindowAsScrollContainer=true, so body as scrollContainer, the result is view has no scrolling changes,but sorting can happen;

If body as scrollContainer,the height of SlickList component is auto and useWindowAsScrollContainer=true,trigger body scrolling when dragging to the border of a window,so the user can scroll to a specific location and put it in a specific location.

Clear Examples Required

The example is not descriptive. Others a bit complicated.
Where do you write this?
useDragHandle="true"
Can you provide separate examples?

Getting this to work with Nuxt

How can I get this plugin to work with nuxt? Any help would be great!

before-sort event?

I have a list of collapsible items and would like to minimize them before sorting starts, due to issues related to #32. Is there something like before-sort event or some other hook I can use? Thanks.

Broken links in readme

Several links are broken in the README

Text being selected on drag [Firefox]

I've noticed that when using Firefox, text is getting selected when an item is dragged over top of one or more other items. It seems to be that this happens if the initial click is in the text portion of an element (but not if the initial click is in the padding or margin).

Apply without separating components?

I currently have something (slightly simplified) like this:

<ul class="sidebar-list">
  <sidebar-item 
    v-for="tag in sortedTags" 
    :key="tag.id" 
    :class="{ 'selected': currentTag.id == tag.id }"
    >
    </sidebar-item>
</ul>

Is there an easy way for me to apply the mixins without breaking each bit into another component? The sidebar-item component isn't always in a sortable container in this case, but I don't want to have to duplicate the component just to apply the mixin to it, while not applying it to others.

[help] Component in mixin

Is custom component allowed in mixin?

Forex:

let SortableItem = { mixins: [ElementMixin], props: ["item"], directives: { handle: HandleDirective }, template: '<question-shell v-bind:question="'What is your name?'" question-type="paragraph" v-bind:question-no="1"></question-shell>', }

Uncaught ReferenceError: regeneratorRuntime is not defined

The error is thrown after I import vue-slicksort

import { SlickList, SlickItem } from 'vue-slicksort'

Drag handle images not appearing in Firefox

In the drag handle example, the drag handle SVG background image isn't appearing in Firefox (58.0.1):

I did some digging and can confirm that the hash in color="#000" causes this behaviour (thanks to this Stack Overflow answer), and using color="black" fixes it.

I'll send up a PR with that change!

useDragHandle

    <div class="root">
        <SortableList :useDragHandle="true" lockAxis="y" v-model="moduleList" @input="onInput($event)">
            <SortableItem v-for="(item, index) in moduleList" :index="index" :key="item.id" :item="item.name" />
        </SortableList>
    </div>
</template>```


```    const SortableItem = {
        mixins: [ElementMixin],
        props: ['item'],
        template: `
    <li class="list-item list-group-item align-items-center">
    {{item}}
    <div class="pull-right">
        <toggle-button :value="true"
                   color="#82C7EB"
                   :sync="true"
                   :labels="true"/>
    </div>
        <span class="glyphicon handle pull-right text-info">&#xe068;</span>

    </li>
  `,
    };

How make it draggable only with icon.
I suppose add some element with class .handle? but it doesnt work.
Help pls

Question: Best way to limit sortable range?

Great component, thanks for making it available!
I have a use-case for SlickSort where I would like to limit the range in my collection where and item can be dropped. For example, the user can start dragging element number 15, and they can drop it anywhere in indexes 10-20, but aren't allowed to drop it into indexes 1-10.

I could probably handle this by firing a method on @sort-end, and setting the collection back to the original order if the new order isn't allowed, but it would be nice to give some feedback during the drop that this wouldn't be allowed.

Is dragging multiple elements at once possible ?

Hi! I was wondering if dragging multiple elements at once was possible?

For instance, the user would select several elements with Cmd + click and then drop them.

Does not work with table elements?

Hi I`m trying to use this with table element but when using tbody as a container and tr as element, the list always reset to its original order immediately after mouseup event.

Drop one element into another?

Hi! I'd like to know if it was possible for an element to be at the same time a dropzone and a drag item. This would allow to drop an item into another ;)

Append new element after server response

It there a way to add dymanically new element to slicksort list after server response, for example after image upload?

Bad interaction with external transition-group

I'm trying to remove elements from the list via special buttons, with animations.
I can make either sorting work, or delete animation, but not both.

<SortableList lockAxis="y" :useDragHandle="true" v-model="items">
  <transition-group name="list">
    <SortableListItem v-for="(item, index) in items" :index="index" :key="item.key"
        class="md-elevation-1 list-item">
      <md-icon v-handle>reorder</md-icon>
      <md-field class="md-layout-item">
        <md-input v-model="item.name"></md-input>
      </md-field>
      <md-button class="md-icon-button" @click="deleteItem(index)">
        <md-icon>delete</md-icon>
      </md-button>
    </SortableListItem>
  </transition-group>
</SortableList>

.list-item {
  transition: all 1s;
}
.list-enter-active, .list-leave-active {
  position: absolute;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateX(300px);
}

data: () => ({
  items: [{name:'foo', key: 0}, {name:'bar', key: 1}, {name:'baz', key:2}],
}),
methods: {
  deleteItem(index) {
    this.items.splice(index, 1);
  }
},

This shows correct animation for deleting, but when I'm trying to drag one of items, they start jumping around. Removing transition-group fixes it.
I suspect this has something to do with :key, but when I'm changing to :key="index", it also starts lagging, and it still doesn't work.

Without create additional Div

Is there anyway we can have without creating a div?

Im using css grid layout, this additional div will mess up the structure.

[help] v-handle inside component

How can i use v-handle inside mixin component?

Forex:
I pass custom component in mixin.

let SortableItem = { 
mixins: [ElementMixin], 
props: ["item"], 
directives: { handle: HandleDirective }, 
template: '<question-shell v-bind:question="'What is your name?'" question-type="paragraph" v-bind:question-no="1"></question-shell>', }

This is inside component.

<div class="handle" v-handle>
    <div class="icon-alpha size-32"></div>
</div>

How can i use v-hande directive inside another component?

remove one element?

this vue-slicksort program work very well, but how to remove one element form the list?
use @click="delImage" at the element is not working.

TypeError: this.$el.sortableInfo is undefined

Hello Jexordexan,

I have the following error when I prepend new items to a SlickSort list.

TypeError: this.$el.sortableInfo is undefined

The error occurs when the items in the list are disabled and their keys are not equal to their index.
Otherwise it works fine.

Here is a jsFiddle that showcase the error: https://jsfiddle.net/spoutnik/7nqm1L56/
Just prepend a new item and look at the console.

I don't really know why but I'm guessing it's due to how Vue is optimizing list rendering when the key is more closely linked to the item itself.

When you trace the error down, you reach this line https://github.com/Jexordexan/vue-slicksort/blob/master/src/ElementMixin.js#L30

Cheers,

cdnjs.cloudflare.com support

Please, put you awesome plugin to cdnjs.cloudflare.com along with unpkg.com

Click failure in component

Hello, using your drag-and-drop plug-in causes the click event (@click) in the component to fail. Is there any solution?

how to use @sortEnd

Please for me example use @sortend, thanks.

Is it possible to select text inside a drag element?

Hi! Is it possible to select text inside a drag element?

Is it possible to drag an object from one nested list to another?

Hi,

Is it possible to drag an object from one nested list to another nested list as indicated by the attached image? It is not doable on the demo page. Thank you for a great component!

Define sortable container explicitly

Hi,
I have a problem while sorting. Dragged element disappears from view. It is inserted just before closing body tag. Is there a way to define sortable container?

[awful performance] long list drag

when list length great then 200; drag can not work

Feature Request: Add CSS class to container when item actively being dragged

Having a simple way to add a CSS class to the container when an item is being dragged would be helpful. In my specific use case, I want to disable text selection when dragging is happening (w/CSS's user-select: none), but keep it enabled when no dragging is happening.

If this is already feasible with the current API, please let me know and I'll close this. Thanks ahead of time.

Update fiddle link

fiddle link is broken.

error throw by judge lockoffset

In the ContainerMinxin.js

getLockPixelOffset(lockOffset) {
...
if (typeof lockOffset === 'string') {
const match = /^[+-]?\d*(?:.\d*)?(px|%)$/.exec(lockOffset);
if (match !== null) {
throw new Error(lockOffset value should be a number or a string of a number followed by "px" or "%". Given ${lockOffset});
}

But in my test, when the lockOffset equal '2px',
match is ["2px", "px", index: 0, input: "2px", groups: undefined]
so match !== null return true，and throw the error tips，which I think is the mistake;

If that is not the mistake，please tell me what is the principle？Thanks

how to show handle

I'm a green hand,how to show v-handle [showHandle]

jexordexan / vue-slicksort Goto Github PK

vue-slicksort's People

Contributors

Stargazers

Watchers

Forkers

vue-slicksort's Issues

Recommend Projects

Recommend Topics

Recommend Org