search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
765 stars 96 forks source link

docs: Provide code for sortable list example #19

Closed hawkeye64 closed 5 years ago

hawkeye64 commented 5 years ago

On the documentation page, there is an example for sortable list : This is an example for sortable list. Drag these items to sort these.. The area I am most interested in is how the other items make room when dragged item is moved? Can you please add to documentation how this is acheived?

anseki commented 5 years ago

Hi @hawkeye64, thank you for your comment. That example uses the onDrag event listener to move items. The source code is very small and simple. Therefore, you can understand that by reading the code, maybe. Tell me if your code doesn't work.

hawkeye64 commented 5 years ago

Are you saying that the other items in a list will automatically make room for the item being dragged? If so, than that is not happening for me.

anseki commented 5 years ago

Do you mean that you could not understand the source code of that example?

hawkeye64 commented 5 years ago

I never saw the source code.

hawkeye64 commented 5 years ago

This is what I am looking at: https://anseki.github.io/plain-draggable/

anseki commented 5 years ago

Um... Do you mean that the other items did not make room automatically when you drag an item, in the example? Those should move automatically.

anseki commented 5 years ago

If the items did not move automatically, please tell me your web browser (name and version). Also, try again with recent typical web browser such as Google Chrome.

hawkeye64 commented 5 years ago

I will put a codepen together in next couple of days. I was using chrome. I think the issue is I am using Vue, and I did the list items in a v-for="n to 10". I think Vue and plain-draggable are fight for DOM control.

anseki commented 5 years ago

PlainDraggable can be used with Vue.js. Of course I used those together, in some projects.

So, I have to ask once again. The other items in the example did not make room automatically when you drag an item with Google Chrome?

BTW, write v-for="n in 10".

anseki commented 5 years ago

I don't know why you never saw the source code, but I copied that to JSFiddle and implemented Vue.js. https://jsfiddle.net/3cmbo8h1/ Try to drag an item (in the bottom-right box), with Google Chrome.

anseki commented 5 years ago

Could you explain this situation to me?

anseki commented 5 years ago

Since you made this issue, I indicated suggestion and example to help you, and I asked you several questions to help you. I spent my time for you. However you ignored all of those. Was your issue already solved?

hawkeye64 commented 5 years ago

Sorry, I am very helpful for your time and suggestions. I just have a lot on my plate right now and didn't want to bog you down so I closed it. I'll be back into it as soon as I can, but this month is going to be bad for time. But, not fair for you to keep it open that long.

anseki commented 5 years ago

I see. :smile: Remember, you can save your time and the person's time if you answer a question from person who tries to help you. And you can do that easily.

GDM95 commented 1 year ago

It seems like the original poster was simply asking for the full HTML+CSS+JS for the example on this page: https://anseki.github.io/plain-draggable/

It would save me a lot of time if you posted that instead of a list of demos with no code associated with them. It isn't in your repo, or I can't find it.

anseki commented 1 year ago

Hi @GDM95, thank you for the comment. Please check the source code of the example. You should find the full HTML+CSS+JS.