Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need doc for using drag helper with sortable-objects #145

Open
lupestro opened this issue Nov 29, 2018 · 2 comments
Open

Need doc for using drag helper with sortable-objects #145

lupestro opened this issue Nov 29, 2018 · 2 comments

Comments

@lupestro
Copy link

The README section for using the drag helper needs an example of using it with lists of {{#draggable-object}} within {{#sortable-objects}}. It isn't clear in this case what constitutes a valid drop target to supply for the await drag (draggable-selector, {drop: drop-target-selector}) - any draggable? - the container? if the latter, how do we specify which item we're dropping after? - or whether some other approach must be taken to perform the drop to reorder the list.

@dgavey
Copy link
Collaborator

dgavey commented Nov 29, 2018

Yeah I should probably extend the docs. For now you should be able to get an idea of what to do from here -> https://github.com/mharris717/ember-drag-drop/blob/master/tests/integration/components/sortable-objects-test.js

@lupestro
Copy link
Author

Thanks - Using a few lines from that as a starting point, I've now got integration tests working on all browsers. With a few adjustments for it being a horizontal row of tabs, this was the needed piece:

        let startDragSelector = '.my-container .my-button-drag:nth-child(1)',
            dragOverSelector = '.my-container .my-button-drag:nth-child(2)';
        const rect = find(dragOverSelector).getBoundingClientRect();
        await drag(startDragSelector, {
            drop: dragOverSelector,
            dragOverMoves: [
                [{ clientX: rect.left, clientY: rect.top }],
                [{ clientX: rect.left + (rect.width / 2), clientY: rect.top + (rect.height / 2) }]
          ],
        });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants