Feature Request: Make rows draggable

s0x commented 7 years ago

I'm submitting a ...

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Expected behavior It would be great to have the option to create draggable rows.

What is the motivation / use case for changing the behavior? If you implement a file listing using ngx-datatable, a drag option would allow to simplify the move operation a lot

amcdnl commented 7 years ago

This one is gonna be tough, I don't have a direct need for it, if you wanna take it on I'm happy to point you in the right direction though.

alfakappa commented 7 years ago

Actually a plus 1 for this. I need a table to be sortable by drag and drop and save that to the server so a list of articles can be reordered by drag/drop

chauey commented 7 years ago

guessing ng2 dragula https://github.com/valor-software/ng2-dragula would be good for this somehow

elvisbegovic commented 7 years ago

@chauey do you tried ? how can I append this dragula directive to whole row ? actually I can't apply any directive on because they aren't exposed

amcdnl commented 7 years ago

The virtual scrolling scenario makes it near impossible, if you aren't doing that it should be easy though.

elvisbegovic commented 7 years ago

my needs is to add posibility to add

(dragstart)="drag(row)" 
draggable="true" 
(drop)="drop(row)"  
(dragover)="allowDrop($event)"

On row tag <datatable-body-row> or<datatable-row-wrapper>

But I cant with actual declaration of template to atach these event directly I only can do on a cell... like this :

<ngx-datatable-column name="Gender" width="300">
      <template let-row="row" let-value="value" ngx-datatable-cell-template>
        <div [innerHTML]="row['name']" (drop)="drop(row)"  (dragover)="allowDrop($event)" (dragstart)="drag(row)" draggable="true">  </div>
      </template>
    </ngx-datatable-column>

ps: using virtual scroll

Brocco commented 7 years ago

Is anyone actively working on implementing this feature?

coding2012 commented 7 years ago

+1

sergeushenecz commented 7 years ago

+1

sergeushenecz commented 7 years ago

+1

anu1885 commented 7 years ago

@istiti thanks for the pointer to move ahead in this regards. I tried following the below two approaches-:

1) I wrote templates for all the columns and handled the drag events on the templates, but we see below issues with this approach- a) We don’t find this approach architecturally correct, as drag events should be triggered on rows than on cells. b) We will need to have a base column template with drag/drop handlers which can be extended by other columns if they need to have their own templates. c) Auto scroll of data on drag-over can only be seen on chrome but not on IE/edge and there is no way of implementing it for IE/edge with this approach. d) Custom drag over image can only be seen on chrome but not on IE/edge and there is no way of implementing it for IE/edge with this approach.

2) I forked the library and dispatched the dragstart event from the row to the datatable component and handled it on the component to check if this event can be listened. Please see the changes (very minimal and just for one event) at https://github.com/j1016405/ngx-datatable .

The approach #2 works well, but I wanted to know if this is the right way we are heading? Also we still do not know how to implement ‘auto-scroll’ and ‘custom drag-over’ image for IE/Edge browsers. Also please provide your feedback for approach #1, if any. Is that something we can live with and improve it with some modifications for it to work? Please suggest.

NayHaPal commented 7 years ago

+++1111

NayHaPal commented 7 years ago

any solution

ejahn commented 7 years ago

+1

arsyed04 commented 7 years ago

@anu1885 What is update on this feature? Can you send a pull request to @amcdnl soon?

wizarrc commented 7 years ago

This looks to be a tricky feature to implement. I might be able to work out something in my fork, but it's unstable when you start thinking in terms of sorting and keeping the sort after collection updates, a concept that is present in rows but not columns

VaniKiran commented 7 years ago

any updates on reordering rows?

bkandoori commented 7 years ago

Any update on this ? this will be really useful .

xtgrant commented 7 years ago

@s0x @chauey @anu1885 @VaniKiran @bkandoori @amcdnl @NayHaPal @istiti @Brocco @coding2012 @sergeu90 Here is a custom dragula directive that can be used on any ngx-datatable implementation!

NGX-Datatable + Dragula

File name: dragula-extended.directive.ts

Here is a working plunker of it: https://plnkr.co/edit/O1PZDr?p=preview

EASY To implement: 1) Just copy directive (no extra coding needed, unless you want to customize it further)

FILE IS ATTACHED dragula-extended.directive.zip 2) add it in your module 'declarations' and 'exports' 3) add required attributes to your ngx-datatable
- - read comment in the app.component.html for requirements in the plunker example 4) add the emitter callback functions to your component.ts file that will be using ngx-datatable
- - (onDrag) and (onDrop) are used in the plunker example

This directive was based off this implementation of the custom plunker directive created by: User d1820 https://plnkr.co/edit/Mivcv5?p=info

I modified it to:

work globally for dynamic/subscribed and static data users.
use ngx-datatable[] as main selector, instead of a standalone directive selector
added directive drag/drop subscriptions and emitters.
points to the 'datatable-scroller' as the parent node for rows.
fixed the options to be referenced before injection.
added ngDestroy for the current dragula service and subscriptions.
made the classSelector ?Optional.

Enjoy!

UPDATE - For Ngx-datatable Virtual Scroll + Dragula Please see comment: https://github.com/swimlane/ngx-datatable/issues/411#issuecomment-340792345

VaniKiran commented 7 years ago

Hi xtgrant,

Thanks very much for sharing . table with the scrollbar properties, drag and drop is not working. [scrollbarH]="true" [scrollbarV]="true" If possible can you please check this. Thanks is advance!

xtgrant commented 7 years ago

@VaniKiran
Hi, I will be happy to take a look, and will provide a plunker for the fix.

VaniKiran commented 7 years ago

Many Thanks!

xtgrant commented 7 years ago

@VaniKiran Hi, so I did some digging and found that dragging works but not visually. The model in dragula and the model in the component are updating correctly. The reason why you do not see the html reflect the updated model is because of the ngx-datatable/virtual scrolling styles.

Currently [scrollbarV] adds:

position: absolute, this prevents the elements from rendering in the correct order
transform: traslate3d(0, {{ item y.position }}, 0), this positions the (absolute positioned) elements based on this calculation of all childrens heights and how many items are in list
backface-visibility:hidden, this prevents the blur motion of dragging

I will play with it and try out writing a function that takes in the current "el" to mirror the container, and loop through on every drag to update the current "el" children's transform and backface-visibility styles generated by ngx-datatable, to bring back the "dragging" look and feel. And will try passing in a new 'datatable-scroller' parent node on dropModel.

Just wanted to let you know what the causes were, in case you didnt want to wait on me. :)

Thanks.

VaniKiran commented 7 years ago

Thanks Very much!

arsyed04 commented 7 years ago

@VaniKiran are you planning to make a pull request on this one?

xtgrant commented 7 years ago

@VaniKiran I havent forgotten about the plunker, still working to make it stable. Dragula doesnt work for absolute positioned elements, and the current html container, I generate, that replaces the parent node updates correctly 50% of the time... so making some adjustments and will be back in a few days.

KasperSommer commented 6 years ago

Looking forward to it!

xtgrant commented 6 years ago

@s0x @chauey @anu1885 @VaniKiran @bkandoori @amcdnl @NayHaPal @istiti @KasperSommer

Virtual Scroll + Dragula

Hi guys, so after multiple iterations, I have come to an acceptable stable implementation in supporting Virtual Scrolling and Dragula.

Original Ngx-datatable + Dragula, please see: https://github.com/swimlane/ngx-datatable/issues/411#issuecomment-334306284

Please take a look at the files that changed: 1. dragula-extended.directive.ts

added the 'input' for dragulaVScroll property, that allows you to customize directive when true.

2. app.component.ts

added separate model for updating dragula. // dataModel2
added setTimeout() to allow the directive onChange to update when ngx-datatable updates
added render boolean flag to allow ngx-datatable virtual scroll to recalculate the properties on all children. // renderTable

3. app.component.html

set the 'dragulaModel' property to 'dataModel2'

4. app.component.css

added .gu-unselectable styles, you may enable these to see the mirror child, up to you
added .gu-mirror styles for dragging positioning

Plunker: https://plnkr.co/edit/UUxn8x?p=preview

Let me know any concerns you might have!

::note:: I did try updating the model and html without the render flag. But the ngx-datatable would still cache the previous positions of the rows. The dragula model would update correctly but you would see ngx-datatable not match the mirror container. The render flag is expensive for long lists (>100). But I figured it's much more simpler to manage than having to configure the virtual scroll outside of the ngx-datatable directive.

Thanks.

mcblum commented 6 years ago

@xtgrant hey - this is awesome! exactly what we were looking for. do you think you're going to push these files / changes to their own repo or fork? it would be awesome to have a place to continue development of drag and drop within the datatable.

edit: also, for some reason, I cannot get the rows to drag. there are no errors thrown but they don't move!

edit again: never mind! I just needed to make a small change. Where you configure the options for the selector I needed to use

const options = {
                    moves: (el, container, handle) => {
                        return handle.className.includes(classSelector);
                    }
                };

insted since the element had other classes.

xtgrant commented 6 years ago

@mcblum Hi! I'm glad you found the solution for drag to work. In regards to pushing / forking these changes. I have have started to add an instance of Dragula, in Ngx-datatable, so there would not need to be a directive. Currently it is crude behavior and it's nothing substantial since work is taking up most of my time before thanksgiving. So once I get time to dive into it, I will be happy to provide a fork of it.

The directive attached in comment: https://github.com/swimlane/ngx-datatable/issues/411#issuecomment-334306284 is the base concept and only made it as a separate file due to time and portability.

Wish this was my full time job so I could do more in a timely manor. My apologies!

mcblum commented 6 years ago

@xtgrant no worries man! Everyone totally understands - this is volunteer work. Anyway, whenever you have time I know it'll be awesome. Have a great night!

webmatrixxxl commented 6 years ago

There was a problem @xtgrant example. unpkg.com/rxjs@5.1.0/operators.js Failed to load resource: the server responded with a status of 404 ()

I made a fix here so now it is running ok: https://plnkr.co/edit/T8rormb51vypRzcl8Ug4?p=preview

arsyed04 commented 6 years ago

What is the update on pull request?

sundaravadivel1980 commented 6 years ago

Is the PR created? is this available?

karljv commented 6 years ago

I am also waiting eagerly.

phenze commented 6 years ago

For anybody who is interested in a native implementation without any other dependencies. I made a custom implementation which can be found here :

https://github.com/i-novation/ngx-datatable/tree/drag-drop

This should work with single and multi selection. Look at the new page under Rows --> Drag&Drop for an example.

I use the Drag&Drop API From HTML 5. Because i only need support for chromium i have not testet other browsers.

thiagoknop3 commented 6 years ago

@euchkatzl , how can I disable the vertical scroll?

phenze commented 6 years ago

You cannot because this is made by the browser automatically.

But why want you to do that ?

thiagoknop3 commented 6 years ago

@euchkatzl the auto height row don’t work (the vertical scroll need a function or a number) and I have two vertical scrolls . One of the browser and another to ngx-datatable

ardenne21 commented 6 years ago

Hi, I tried all the available plunkers for the ng2-dragula directive, but none of them it is actually working on my devices. If I open the console, multiple errors appears and the projects won't start.

I managed to replicate a working copy of the project on codesandbox (here the demo with the ng2-dragula@1.3.0: https://codesandbox.io/s/8lk1yp92r8 ), but the sorting code in not working properly on the table. After debugging seems that the values returned in the this.subscriptionDrop have incorrect index for the "source", resulting in the table shuffling data randomly after moving one row.

I also created a demo for the latest version of the ng2-dragula, but the directive (the method initializeDragula()) is not working well with this version (demo: https://codesandbox.io/s/7mznj3k41x)

I would really appreciate if someone can point me in the right direction to make one of the these two demos work.

chase9 commented 5 years ago

With Angular 7 there is now a drag and drop module built into CDK.

This might help anyone who's looking to implement this feature (and hopfully submit a PR for the rest of us 😉 )

HackPoint commented 5 years ago

<datatable-body-row> or<datatable-row-wrapper>

Can I do the same on draggin columns, my need is to add animation on dragging column and adding a handle to do it.

HackPoint commented 5 years ago

@xtgrant is it possible to hook into the events of dragging? My need is to reorder columns with animation on switch of the columns and add a dragging handle and 50% see through dragging container like in ag-grid when dragging? I'm on angular5

HackPoint commented 5 years ago

@phenze I forked your solution, how can I see where did you do the changes?

phenze commented 5 years ago

You can see my commits here: https://github.com/i-novation/ngx-datatable/commits/drag-drop?path=

goldel777 commented 5 years ago

Hi Phenze,

Thank you for providing this! Can you help me understand where I can find the Rows Drap&Drop demo?

Thanks in advance

phenze commented 5 years ago

Hi @goldel777 , you have to start the developing build on your own to see it.

For that just download a copy of my branch here: https://github.com/i-novation/ngx-datatable/tree/drag-drop

Then unzip it and navigate to that folder. Then you just have to yarn install and after that just start it with yarn start.

Afterwards your browser should open and you can select the drag and drop demo in the sidebar.

goldel777 commented 5 years ago

Thanks Pascal Can you help me understand which of the demos has drag and drop? I have been able to integrate the dragula code in my app but unfortunate the change event does not fire on the 2nd or subsequent pages.

Sent from Yahoo Mail for iPhone

On Monday, January 28, 2019, 1:58 AM, Pascal Henze notifications@github.com wrote:

Hi @goldel777 , you have to start the developing build on your own to see it.

For that just download a copy of my branch here: https://github.com/i-novation/ngx-datatable/tree/drag-drop

Then unzip it and navigate to that folder. Then you just have to yarn install and after that just start it with yarn start.

Afterwards your browser should open and you can select the drag and drop demo in the sidebar.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

phenze commented 5 years ago

Hi @goldel777 , My code has nothing to do with dragula. i have made a plain html5 implementation. Take a look here for supported browsers: https://caniuse.com/#feat=dragndrop

Look at the link above to see my changes.

After you start your dev server you can access the demo site at http:localhost:9999.

Then on the left sidebar just choose Drag&Drop Example and look at the code. bildschirmfoto 2019-01-29 um 08 16 07

kim2014 commented 5 years ago

Hi @phenze, Thanks Pascal for implementing this drag&drop feature

Currently I am using ngx-datatable version 11.3.0 . I think the ngx-database version 13.0.1 has an option of drag&drop right?.

BTW where I can get this document for ngx-datatable version 13.0.1 which has drag&drop for Rows as show above.

Thanks Kim

swimlane / ngx-datatable

Feature Request: Make rows draggable #411