ember-drag-drop icon indicating copy to clipboard operation
ember-drag-drop copied to clipboard

Need doc for using drag helper with sortable-objects

Open lupestro opened this issue 6 years ago • 2 comments

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.

lupestro avatar Nov 29 '18 04:11 lupestro

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

dgavey avatar Nov 29 '18 14:11 dgavey

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) }]
          ],
        });

lupestro avatar Dec 10 '18 18:12 lupestro