2 |
7 |
3 |
5 |
6 | Simple list
4 |5 |
8 |
33 |
--------------------------------------------------------------------------------
/addon/utils/array-utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Moves an array element from one index to another
3 | * @param {Array} arr
4 | * @param {Number} from
5 | * @param {Number} to
6 | * @returns {Array} [ ]
7 | */
8 | export function move(arr, from, to) {
9 | const clone = [...arr];
10 | clone.splice(to, 0, clone.splice(from, 1)[0]);
11 | return clone;
12 | }
13 |
14 | /**
15 | * Insert an item to an array in the specified index
16 | * @param {Array} arr
17 | * @param {Number} index
18 | * @param {any} item
19 | * @returns {Array} [ ]
20 | */
21 | export function insertAt(arr, index, item) {
22 | const clone = [...arr];
23 | clone.splice(index, 0, item)
24 | return clone;
25 | }
26 |
27 | /**
28 | * Insert an item to an array in the specified index
29 | * @param {Array} arr
30 | * @param {Number} index
31 | * @returns {Array} [ ]
32 | */
33 | export function removeFrom(arr, index) {
34 | const clone = [...arr];
35 | clone.splice(index, 1);
36 | return clone;
37 | }
38 |
--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | // ***********************************************
2 | // This example commands.js shows you how to
3 | // create various custom commands and overwrite
4 | // existing commands.
5 | //
6 | // For more comprehensive examples of custom
7 | // commands please read more here:
8 | // https://on.cypress.io/custom-commands
9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 |
27 | require('@4tw/cypress-drag-drop')
28 |
--------------------------------------------------------------------------------
/tests/dummy/app/styles/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 |
3 | @import "tailwindcss/components";
4 | /* @import "components.css"; */
5 |
6 | @import "tailwindcss/utilities";
7 | /* @import "utilities.css"; */
8 |
9 | .ghost-class {
10 | background-color: #e04e39;
11 | color: #fff;
12 | }
13 |
14 | .bg-yellow {
15 | background-color: rgb(253, 255, 143);
16 | }
17 |
18 | .shared-list div {
19 | width: 100%
20 | }
21 |
22 | .handle {
23 | cursor: grab;
24 | }
25 |
26 | .filter {
27 | background-color: #e04e39;
28 | }
29 |
30 | .ember-sortable-js {
31 | width: 200px;
32 | }
33 |
34 | .pretty-list .item {
35 | background-color: #A10808;
36 | display: flex;
37 | flex-direction: column;
38 | justify-content: center;
39 | align-items: center;
40 | text-align: center;
41 | height: 150px;
42 | border: 1px solid grey;
43 | margin: 20px;
44 | width: 150px;
45 | }
46 |
47 | .threshold-indicator {
48 | display: flex;
49 | flex-direction: column ;
50 | text-align: center;
51 | justify-content: center;
52 | align-items: center;
53 | background-color: #cf2b2b;
54 | width: 100%;
55 | }
56 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/simple.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { tracked } from '@glimmer/tracking';
3 |
4 | export default class SimpleController extends Controller {
5 | @tracked list = [
6 | { title: 'one' },
7 | { title: 'two' },
8 | { title: 'three' },
9 | { title: 'four' },
10 | { title: 'five' },
11 | ];
12 | onChoose() {
13 | console.log('*** Action *** - onChoose');
14 | }
15 | onUnchoose() {
16 | console.log('*** Action *** - onUnchoose');
17 | }
18 | onStart() {
19 | console.log('*** Action *** - onStart');
20 | }
21 | onEnd() {
22 | console.log('*** Action *** - onEnd');
23 | }
24 | onMove() {
25 | console.log('*** Action *** - onMove');
26 | }
27 | onUpdate() {
28 | console.log('*** Action *** - onUpdate');
29 | }
30 | onAdd() {
31 | console.log('*** Action *** - onAdd');
32 | }
33 | onRemove() {
34 | console.log('*** Action *** - onAdd');
35 | }
36 | onClone() {
37 | //_onDragStart
38 | console.log('*** Action *** - onClone');
39 | }
40 | onChange() {
41 | console.log('*** Action *** - onChange');
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 All contributors to ember-sortablejs
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
9 |
25 | {{#each list as |item index| }}
26 |
29 |
30 | {{item.value.title}}
27 | {{/each}}
28 |
31 |
32 |
2 |
7 |
3 |
5 |
6 | Cloning
4 |5 |
8 |
45 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/disable.hbs:
--------------------------------------------------------------------------------
1 |
9 |
20 | {{#each list as |item index| }}
21 |
24 |
25 |
36 | {{#each list as |item index| }}
37 |
40 |
41 | {{item.item}}
22 | {{/each}}
23 | 25 |
{{item.item}}
38 | {{/each}}
39 |
42 |
43 |
44 |
2 |
7 |
3 |
5 |
6 | Disable Sorting
4 |5 |
8 |
26 |
44 |
45 |
9 |
20 | {{#each list as |item index| }}
21 |
24 |
25 | {{item.item}}
22 | {{/each}}
23 | 26 |
27 |
38 | {{#each list as |item index| }}
39 |
42 |
43 | {{item.item}}
40 | {{/each}}
41 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: 'babel-eslint',
4 | parserOptions: {
5 | ecmaVersion: 2018,
6 | sourceType: 'module',
7 | ecmaFeatures: {
8 | legacyDecorators: true
9 | }
10 | },
11 | plugins: [
12 | 'ember'
13 | ],
14 | extends: [
15 | 'eslint:recommended',
16 | 'plugin:ember/recommended'
17 | ],
18 | env: {
19 | browser: true
20 | },
21 | rules: {
22 | 'ember/order-in-components': [2],
23 | 'ember/no-jquery': 'error'
24 | },
25 | overrides: [
26 | // node files
27 | {
28 | files: [
29 | '.eslintrc.js',
30 | '.template-lintrc.js',
31 | 'ember-cli-build.js',
32 | 'index.js',
33 | 'testem.js',
34 | 'blueprints/*/index.js',
35 | 'config/**/*.js',
36 | 'tests/dummy/config/**/*.js'
37 | ],
38 | excludedFiles: [
39 | 'addon/**',
40 | 'addon-test-support/**',
41 | 'app/**',
42 | 'tests/dummy/app/**',
43 | ],
44 | parserOptions: {
45 | sourceType: 'script'
46 | },
47 | env: {
48 | browser: false,
49 | node: true
50 | },
51 | plugins: ['node'],
52 | rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
53 | // add your custom rules and overrides for node files here
54 | })
55 | }
56 | ]
57 | };
58 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/filter.hbs:
--------------------------------------------------------------------------------
1 |
2 |
7 |
3 |
5 |
6 | Filtering draggable objects
4 |5 |
8 |
37 |
--------------------------------------------------------------------------------
/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
4 | const isProduction = EmberAddon.env() === 'production';
5 |
6 | const purgeCSS = {
7 | module: require('@fullhuman/postcss-purgecss'),
8 | options: {
9 | content: [
10 | // add extra paths here for components/controllers which include tailwind classes
11 | './app/index.html',
12 | './app/templates/**/*.hbs',
13 | './app/components/**/*.hbs',
14 | ],
15 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
16 | }
17 | };
18 |
19 | module.exports = function(defaults) {
20 | let app = new EmberAddon(defaults, {
21 | // Add options here
22 | postcssOptions: {
23 | compile: {
24 | plugins: [
25 | {
26 | module: require('postcss-import'),
27 | options: {
28 | path: ['node_modules']
29 | }
30 | },
31 | require('tailwindcss')('./app/tailwind/config.js'),
32 | ...isProduction ? [purgeCSS] : []
33 | ]
34 | }
35 | }
36 | });
37 |
38 | /*
39 | This build file specifies the options for the dummy test app of this
40 | addon, located in `/tests/dummy`
41 | This build file does *not* influence how the addon or the app using it
42 | behave. You most likely want to be modifying `./index.js` or app's build file
43 | */
44 |
45 | return app.toTree();
46 | };
47 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(environment) {
4 | let ENV = {
5 | modulePrefix: 'dummy',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'auto',
9 | EmberENV: {
10 | FEATURES: {
11 | // Here you can enable experimental features on an ember canary build
12 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
13 | },
14 | EXTEND_PROTOTYPES: {
15 | // Prevent Ember Data from overriding Date.parse.
16 | Date: false
17 | }
18 | },
19 |
20 | APP: {
21 | // Here you can pass flags/options to your application instance
22 | // when it is created
23 | }
24 | };
25 |
26 | if (environment === 'development') {
27 | // ENV.APP.LOG_RESOLVER = true;
28 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
29 | // ENV.APP.LOG_TRANSITIONS = true;
30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
31 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
32 | }
33 |
34 | if (environment === 'test') {
35 | // Testem prefers this...
36 | ENV.locationType = 'none';
37 |
38 | // keep test console output quieter
39 | ENV.APP.LOG_ACTIVE_GENERATION = false;
40 | ENV.APP.LOG_VIEW_LOOKUPS = false;
41 |
42 | ENV.APP.rootElement = '#ember-testing';
43 | ENV.APP.autoboot = false;
44 | }
45 |
46 | if (environment === 'production') {
47 | // here you can enable a production-specific feature
48 | }
49 |
50 | return ENV;
51 | };
52 |
--------------------------------------------------------------------------------
/tests/unit/utils/array-utils-test.js:
--------------------------------------------------------------------------------
1 | import { move, insertAt, removeFrom } from 'ember-sortablejs/utils/array-utils';
2 | import { module, test } from 'qunit';
3 |
4 | module('Unit | Utility | array-utils', function() {
5 |
6 | // Replace this with your real tests.
7 | module('#move', function() {
8 | test('it moves an array element from one position to another ', function(assert) {
9 | const testArray = ['a', 'b', 'c', 'd', 'e'];
10 | const expected = ['b', 'c', 'd', 'a', 'e'];
11 | const actual = move(testArray, 0, 3);
12 |
13 | assert.ok(actual !== testArray);
14 | assert.deepEqual(actual, expected);
15 | });
16 | });
17 |
18 | module('#insertAt', function () {
19 | test('it inserts an element to an array in specified index', function(assert) {
20 | const testArray = ['a', 'b', 'c', 'd', 'e'];
21 | const expected = ['a', 'b', 'f', 'c', 'd', 'e'];
22 | const actual = insertAt(testArray, 2, 'f');
23 |
24 | assert.ok(actual !== testArray);
25 | assert.deepEqual(actual, expected);
26 | });
27 | });
28 |
29 | module('#removeFrom', function () {
30 | test('it removes an array element from a specified index', function(assert) {
31 | const testArray = ['a', 'b', 'c', 'd', 'e'];
32 | const expected = ['a', 'b', 'c', 'e'];
33 | const actual = removeFrom(testArray, 3);
34 |
35 | assert.ok(actual !== testArray);
36 | assert.deepEqual(actual, expected);
37 | });
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/cancelable.hbs:
--------------------------------------------------------------------------------
1 |
9 |
13 |
19 |
20 | Item 1
14 | Item 2
15 | Item 3
16 | Item 4
17 | Item 5
18 |
21 |
36 |
22 |
23 | <SortableJs
24 | class="list-group"
25 | @options={{hash animation=150 handle=".handle"}}
26 | >
27 | <div class="list-group-item"></span>Item 1</div>
28 | <div class="list-group-item"></span>Item 2</div>
29 | <div class="list-group-item filter"></span>Item 3</div>
30 | <div class="list-group-item"></span>Item 4</div>
31 | <div class="list-group-item"></span>Item 5</div>
32 | </SortableJs>
33 |
34 |
35 |
2 |
7 |
3 |
5 |
6 | Shared list
4 |5 |
8 |
42 |
9 |
18 | {{#each list as |item| }}
19 |
22 |
23 | {{item.value.name}}
20 | {{/each}}
21 |
24 |
33 | {{#each list as |item| }}
34 |
37 |
38 | {{item.value.name}}
35 | {{/each}}
36 |
39 |
40 |
41 |
43 | {{#if this.cancelCB}}
44 |
45 | {{/if}}
46 |
47 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | # Node 10.3+ includes npm@6 which has good "npm ci" command
4 | - "10.9"
5 |
6 | addons:
7 | chrome: stable
8 | apt:
9 | packages:
10 | - libgconf-2-4
11 |
12 | cache:
13 | npm: true
14 | directories:
15 | - $HOME/.cache
16 |
17 | env:
18 | global:
19 | # See https://git.io/vdao3 for details.
20 | - JOBS=1
21 |
22 | branches:
23 | only:
24 | - master
25 | # npm version tags
26 | - /^v\d+\.\d+\.\d+/
27 |
28 | jobs:
29 | fail_fast: true
30 | allow_failures:
31 | - env: EMBER_TRY_SCENARIO=ember-canary
32 |
33 | include:
34 | # runs linting and tests with current locked deps
35 | - stage: "Tests"
36 | name: "Tests"
37 | script:
38 | # - npm run lint:hbs
39 | # - npm run lint:js
40 | - npm test
41 | - npm start &
42 | - wait-on http://localhost:4200
43 | - cypress run
44 |
45 | - stage: "Additional Tests"
46 | name: "Floating Dependencies"
47 | install:
48 | - npm ci
49 | script:
50 | - npm test
51 |
52 | # we recommend new addons test the current and previous LTS
53 | # as well as latest stable release (bonus points to beta/canary)
54 | - env: EMBER_TRY_SCENARIO=ember-3.13
55 | - env: EMBER_TRY_SCENARIO=ember-3.14
56 | - env: EMBER_TRY_SCENARIO=ember-release
57 | - env: EMBER_TRY_SCENARIO=ember-beta
58 | - env: EMBER_TRY_SCENARIO=ember-canary
59 | - env: EMBER_TRY_SCENARIO=ember-default-with-jquery
60 |
61 | script:
62 | - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO
63 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/thresholds.hbs:
--------------------------------------------------------------------------------
1 |
2 |
7 |
3 |
5 |
6 | Filtering draggable objects
4 |5 |
8 |
46 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/handle.hbs:
--------------------------------------------------------------------------------
1 |
9 |
18 |
32 |
33 |
19 | {{! template-lint-disable no-inline-styles }}
20 | {{! template-lint-disable style-concatenation }}
21 |
23 | Item 1
22 |
24 | {{! template-lint-disable no-inline-styles }}
25 | {{! template-lint-disable style-concatenation }}
26 |
28 | Item 2
27 |
29 | Threshold:
30 |
31 |
34 |
45 |
35 |
36 | <SortableJs
37 | class="pretty-list"
38 | @options={{hash animation=150 swapThreshold={{this.rangeValue}}}}
39 | >
40 | <div class="list-group-item"></span>Item 1</div>
41 | </SortableJs>
42 |
43 |
44 |
2 |
7 |
3 |
5 |
6 | Using drag handles
4 |5 |
8 |
37 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/shared.hbs:
--------------------------------------------------------------------------------
1 |
9 |
13 |
19 |
20 | ☰ Item 1
14 | ☰ Item 2
15 | ☰ Item 3
16 | ☰ Item 4
17 | ☰ Item 5
18 |
21 |
36 |
22 |
23 | <SortableJs
24 | class="list-group"
25 | @options={{hash animation=150 handle=".handle"}}
26 | >
27 | <div class="list-group-item"><span class="handle">☰</span>Item 1</div>
28 | <div class="list-group-item"><span class="handle">☰</span>Item 2</div>
29 | <div class="list-group-item"><span class="handle">☰</span>Item 3</div>
30 | <div class="list-group-item"><span class="handle">☰</span>Item 4</div>
31 | <div class="list-group-item"><span class="handle">☰</span>Item 5</div>
32 | </SortableJs>
33 |
34 |
35 |
2 |
7 |
3 |
5 |
6 | Shared list
4 |5 |
8 |
50 |
--------------------------------------------------------------------------------
/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 |
5 | module.exports = async function() {
6 | return {
7 | scenarios: [
8 | {
9 | name: 'ember-3.13',
10 | npm: {
11 | devDependencies: {
12 | 'ember-source': '~3.13.0'
13 | }
14 | }
15 | },
16 | {
17 | name: 'ember-3.14',
18 | npm: {
19 | devDependencies: {
20 | 'ember-source': '~3.14.0'
21 | }
22 | }
23 | },
24 | {
25 | name: 'ember-release',
26 | npm: {
27 | devDependencies: {
28 | 'ember-source': await getChannelURL('release')
29 | }
30 | }
31 | },
32 | {
33 | name: 'ember-beta',
34 | npm: {
35 | devDependencies: {
36 | 'ember-source': await getChannelURL('beta')
37 | }
38 | }
39 | },
40 | {
41 | name: 'ember-canary',
42 | npm: {
43 | devDependencies: {
44 | 'ember-source': await getChannelURL('canary')
45 | }
46 | }
47 | },
48 | // The default `.travis.yml` runs this scenario via `npm test`,
49 | // not via `ember try`. It's still included here so that running
50 | // `ember try:each` manually or from a customized CI config will run it
51 | // along with all the other scenarios.
52 | {
53 | name: 'ember-default',
54 | npm: {
55 | devDependencies: {}
56 | }
57 | },
58 | {
59 | name: 'ember-default-with-jquery',
60 | env: {
61 | EMBER_OPTIONAL_FEATURES: JSON.stringify({
62 | 'jquery-integration': true
63 | })
64 | },
65 | npm: {
66 | devDependencies: {
67 | '@ember/jquery': '^0.5.1'
68 | }
69 | }
70 | }
71 | ]
72 | };
73 | };
74 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 |
32 |
9 |
19 | {{#each list as |item index| }}
20 |
26 |
27 |
21 | 
22 | {{item.value.name}}
23 |
24 | {{/each}}
25 |
28 |
38 | {{#each list as |item index|}}
39 |
45 |
46 |
40 |
41 | {{item.value.name}}
42 |
43 | {{/each}}
44 |
47 |
48 |
49 |
33 | {{#if this.inHomeRoute}}
34 |
49 |
--------------------------------------------------------------------------------
/cypress/integration/drag_drop.spec.js:
--------------------------------------------------------------------------------
1 | describe('Ember SortableJS ', function() {
2 | it('renders a list', function() {
3 | const initial = ['one', 'two', 'three', 'four', 'five'];
4 |
5 | cy.visit('http://localhost:4200/simple');
6 |
7 | cy
8 | .get('div[data-list-item]')
9 | .should(($divs) => {
10 | expect($divs).to.have.length(5);
11 |
12 | const renderedList = $divs.map((i, el) => el.innerText);
13 |
14 | expect(renderedList.get()).to.deep.eq(initial);
15 | });
16 | });
17 |
18 | it('reorders as list from top to bottom', function() {
19 | const sorted = ['two', 'three', 'four', 'five', 'one'];
20 |
21 | cy.visit('http://localhost:4200/simple');
22 | cy.get('div[data-list-item="0"').drag('div[data-list-item="4"', { force: true, position: 'bottom' })
23 |
24 | cy
25 | .get('div[data-list-item]')
26 | .should(($divs) => {
27 | expect($divs).to.have.length(5);
28 |
29 | const renderedList = $divs.map((i, el) => el.innerText);
30 |
31 | expect(renderedList.get()).to.deep.eq(sorted);
32 | });
33 | });
34 |
35 | it('reorders a list bottom to top', function() {
36 | const sorted = ['five', 'one', 'two', 'three', 'four'];
37 |
38 | cy.visit('http://localhost:4200/simple');
39 | cy.get('div[data-list-item="4"').drag('div[data-list-item="0"', { force: true, position: 'center' })
40 |
41 | cy
42 | .get('div[data-list-item]')
43 | .should(($divs) => {
44 | expect($divs).to.have.length(5);
45 |
46 | const renderedList = $divs.map((i, el) => el.innerText);
47 |
48 | expect(renderedList.get()).to.deep.eq(sorted);
49 | });
50 | });
51 |
52 | it('adds an item from one list to another', function() {
53 | cy.visit('http://localhost:4200/shared');
54 | cy.get('.list-a > div[data-list-item="0"').drag('.list-b > div[data-list-item="1"', { force: true, position: 'top' });
55 |
56 | const listA = ['Jaden', 'Gustavo'];
57 | const listB = ['Lance', 'Luis', 'Britni', 'Kelly'];
58 |
59 | cy
60 | .get('.list-a > div[data-list-item]')
61 | .should(($divs) => {
62 | expect($divs).to.have.length(2);
63 |
64 | const renderedList = $divs.map((i, el) => el.innerText);
65 |
66 | expect(renderedList.get()).to.deep.eq(listA);
67 | });
68 |
69 | cy
70 | .get('.list-b > div[data-list-item]')
71 | .should(($divs) => {
72 | expect($divs).to.have.length(4);
73 |
74 | const renderedList = $divs.map((i, el) => el.innerText);
75 |
76 | expect(renderedList.get()).to.deep.eq(listB);
77 | });
78 | });
79 | });
80 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/cancelable.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { tracked } from '@glimmer/tracking';
3 | import { action } from '@ember/object';
4 |
5 | class Employee {
6 | @tracked sort;
7 | @tracked name;
8 | @tracked type;
9 | @tracked img;
10 | id;
11 |
12 | constructor(sort, { name, type, id, img}) {
13 | this.id = id;
14 | this.sort = sort;
15 | this.name = name;
16 | this.type = type;
17 | this.img = img;
18 | }
19 | }
20 |
21 | export default class CancelableController extends Controller {
22 | @tracked list = [];
23 | @tracked devSort = [1, 2, 3];
24 | @tracked pmSort = [1, 2, 3];
25 | @tracked cancelCB = null;
26 |
27 | constructor() {
28 | super(...arguments);
29 | setTimeout(() => {
30 | const all = [
31 | { id: 1, name: 'Luis', type: 'dev', img: 'https://api.adorable.io/avatars/25/luis' },
32 | { id: 2, name: 'Jaden', type: 'dev', img: 'https://api.adorable.io/avatars/25/jaden' },
33 | { id: 3, name: 'Gustavo', type: 'dev', img: 'https://api.adorable.io/avatars/25/gustavo' },
34 | { id: 4 ,name: 'Lance', type: 'pm', img: 'https://api.adorable.io/avatars/25/lance' },
35 | { id: 5, name: 'Britni', type: 'pm', img: 'https://api.adorable.io/avatars/25/britni' },
36 | { id: 6, name: 'Kelly', type: 'pm', img: 'https://api.adorable.io/avatars/25/kelly' }
37 | ];
38 | this.list = all.map((person, i) => new Employee(i += 1, person));
39 | }, 5000);
40 | }
41 |
42 | get devList() {
43 | return this.list.filter(employee => employee.type === 'dev');
44 | }
45 |
46 | get sortedDevList() {
47 | return [...this.devList].sort((a, b) => a.id - b.id);
48 | }
49 |
50 | get pmList() {
51 | return this.list.filter(employee => employee.type === 'pm');
52 | }
53 |
54 | get sortedPmList() {
55 | return [...this.pmList].sort((a, b) => a.id - b.id);
56 | }
57 |
58 | onSort(list, evt) {
59 | console.log(`*** Action *** - onSort list ${list}`, evt);
60 | }
61 |
62 | onAdd(list, evt) {
63 | console.log(`*** Action *** - onAdd list ${list}`, evt);
64 | }
65 |
66 | onRemove(list, evt) {
67 | console.log(`*** Action *** - onRemove list ${list}`, evt);
68 | }
69 |
70 | @action
71 | onEnd(list, evt, cancelCB) {
72 | console.log('args log', arguments[0]);
73 | console.log('args log', arguments[1]);
74 | console.log('args log', arguments[2]);
75 | this.cancelCB = cancelCB;
76 | console.log(`*** Action *** - onEnd list ${list}`, evt);
77 | }
78 |
79 | @action
80 | cancelDrag() {
81 | this.cancelCB?.();
82 | this.cancelCB = null;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/shared.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { tracked } from '@glimmer/tracking';
3 | import { action } from '@ember/object';
4 |
5 | class Employee {
6 | @tracked sort;
7 | @tracked name;
8 | @tracked type;
9 | @tracked img;
10 | id;
11 |
12 | constructor(sort, { name, type, id, img}) {
13 | this.id = id;
14 | this.sort = sort;
15 | this.name = name;
16 | this.type = type;
17 | this.img = img;
18 | }
19 | }
20 |
21 | export default class SharedController extends Controller {
22 | @tracked list = [];
23 | @tracked devSort = [1, 2, 3];
24 | @tracked pmSort = [1, 2, 3];
25 |
26 | constructor() {
27 | super(...arguments);
28 | const all = [
29 | { id: 1, name: 'Luis', type: 'dev', img: 'https://api.adorable.io/avatars/25/luis' },
30 | { id: 2, name: 'Jaden', type: 'dev', img: 'https://api.adorable.io/avatars/25/jaden' },
31 | { id: 3, name: 'Gustavo', type: 'dev', img: 'https://api.adorable.io/avatars/25/gustavo' },
32 | { id: 4 ,name: 'Lance', type: 'pm', img: 'https://api.adorable.io/avatars/25/lance' },
33 | { id: 5, name: 'Britni', type: 'pm', img: 'https://api.adorable.io/avatars/25/britni' },
34 | { id: 6, name: 'Kelly', type: 'pm', img: 'https://api.adorable.io/avatars/25/kelly' }
35 | ];
36 | this.list = all.map((person, i) => new Employee(i += 1, person));
37 | }
38 |
39 | get devList() {
40 | return this.list.filter(employee => employee.type === 'dev');
41 | }
42 |
43 | get sortedDevList() {
44 | return this.devList.sort((a, b) => a.sort - b.sort);
45 | }
46 |
47 | get pmList() {
48 | return this.list.filter(employee => employee.type === 'pm');
49 | }
50 |
51 | get sortedPmList() {
52 | return this.pmList.sort((a, b) => a.sort - b.sort);
53 | }
54 |
55 | onSort(evt, list) {
56 | // console.log(`*** Action *** - onSort list ${list}`, evt);
57 | }
58 |
59 | onAdd(list, evt) {
60 | console.log(`*** Action *** - onAdd list ${list}`, evt);
61 | }
62 |
63 | onRemove(evt, list) {
64 | // console.log(`*** Action *** - onRemove list ${list}`, evt);
65 | }
66 |
67 | @action
68 | onEnd(list, evt) {
69 | // this.list = [...this.list];
70 | // console.log(`*** Action *** - onEnd list ${list}`, evt);
71 | // const {
72 | // from: source,
73 | // to: target,
74 | // newIndex,
75 | // item,
76 | // } = evt;
77 |
78 | // const type = target.dataset.groupType;
79 | // const record = this.list.find(r => r.id === Number(item.dataset.recordId));
80 |
81 | // console.log('type', type);
82 | // console.log('recordid', record);
83 |
84 | // record.type = type;
85 | // record.sort = newIndex + 1;
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-sortablejs",
3 | "version": "2.0.0-beta.6",
4 | "description": "EmberJS wrapper for SortableJS",
5 | "keywords": [
6 | "ember-addon",
7 | "ember",
8 | "ember-cli",
9 | "sortable",
10 | "sortablejs",
11 | "drag",
12 | "drop",
13 | "drag and drop"
14 | ],
15 | "repository": "https://github.com/SortableJS/ember-sortablejs",
16 | "license": "MIT",
17 | "author": "Luis Vegerano",
18 | "directories": {
19 | "doc": "doc",
20 | "test": "tests"
21 | },
22 | "scripts": {
23 | "build": "ember build",
24 | "lint:hbs": "ember-template-lint .",
25 | "lint:js": "eslint .",
26 | "start": "ember serve",
27 | "test": "ember test",
28 | "test:all": "ember try:each",
29 | "cypress:run": "cypress run",
30 | "cypress:open": "cypress open"
31 | },
32 | "dependencies": {
33 | "@ember/render-modifiers": "^1.0.2",
34 | "@glimmer/component": "^1.0.0",
35 | "@glimmer/tracking": "^1.0.0",
36 | "ember-auto-import": "^1.5.3",
37 | "ember-cli-babel": "^7.18.0",
38 | "ember-cli-htmlbars": "^4.2.0",
39 | "ember-element-helper": "^0.2.0"
40 | },
41 | "devDependencies": {
42 | "@4tw/cypress-drag-drop": "^1.3.1",
43 | "@ember/optional-features": "^1.3.0",
44 | "@fullhuman/postcss-purgecss": "^2.1.0",
45 | "@types/sortablejs": "^1.10.2",
46 | "babel-eslint": "^10.0.3",
47 | "broccoli-asset-rev": "^3.0.0",
48 | "cypress": "^4.2.0",
49 | "ember-cli": "~3.15.0",
50 | "ember-cli-dependency-checker": "^3.2.0",
51 | "ember-cli-inject-live-reload": "^2.0.1",
52 | "ember-cli-postcss": "^5.0.0",
53 | "ember-cli-sri": "^2.1.1",
54 | "ember-cli-template-lint": "^1.0.0-beta.3",
55 | "ember-cli-uglify": "^3.0.0",
56 | "ember-disable-prototype-extensions": "^1.1.3",
57 | "ember-export-application-global": "^2.0.1",
58 | "ember-load-initializers": "^2.1.1",
59 | "ember-maybe-import-regenerator": "^0.1.6",
60 | "ember-qunit": "^4.6.0",
61 | "ember-resolver": "^7.0.0",
62 | "ember-source": "~3.15.0",
63 | "ember-source-channel-url": "^2.0.1",
64 | "ember-try": "^1.4.0",
65 | "eslint": "^6.8.0",
66 | "eslint-plugin-cypress": "^2.10.3",
67 | "eslint-plugin-ember": "^7.7.1",
68 | "eslint-plugin-node": "^10.0.0",
69 | "loader.js": "^4.7.0",
70 | "postcss-import": "^12.0.1",
71 | "qunit-dom": "^0.9.2",
72 | "sortablejs": "^1.10.2",
73 | "tailwindcss": "^1.2.0",
74 | "wait-on": "^4.0.1"
75 | },
76 | "peerDependencies": {
77 | "sortablejs": ">= 1.10.2 < 2"
78 | },
79 | "engines": {
80 | "node": "10.* || >= 12"
81 | },
82 | "ember": {
83 | "edition": "octane"
84 | },
85 | "ember-addon": {
86 | "configPath": "tests/dummy/config"
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/addon-test-support/dndsimulator.js:
--------------------------------------------------------------------------------
1 | function getPositionAtCenter(element) {
2 | const {top, left, width, height} = element.getBoundingClientRect();
3 | return {
4 | x: left + width / 2,
5 | y: top + height / 2
6 | };
7 | }
8 |
9 | function getDistanceBetweenElements(a, b) {
10 | const aPosition = getPositionAtCenter(a);
11 | const bPosition = getPositionAtCenter(b);
12 |
13 | return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
14 | }
15 |
16 | function createEvent (eventName, options) {
17 | let event = {};
18 | event.cancelable = true;
19 | event.bubbles = true;
20 |
21 | /* if the clientX and clientY options are specified,
22 | also calculated the desired screenX and screenY values */
23 | if (options.x && options.y) {
24 | event.screenX = window.screenX + options.x;
25 | event.screenY = window.screenY + options.y;
26 | event.clientX = options.x;
27 | event.clientY = options.y;
28 | delete options.x;
29 | delete options.y;
30 | }
31 |
32 | event = Object.assign(event, options)
33 |
34 | switch (true) {
35 | case eventName.includes('pointer'):
36 | return new PointerEvent(eventName, event);
37 | case eventName.includes('mouse'):
38 | return new MouseEvent(eventName, event)
39 | case eventName.includes('drag'):
40 | case eventName.includes('drop'):
41 | return new DragEvent(eventName, event);
42 | default:
43 | return new CustomEvent(eventName, event);
44 | }
45 | }
46 |
47 | /**
48 | * @public
49 | * @param {HTMLElement} sourceElement - Element to be dragged
50 | * @param {HTMLElement} targetElement - Element where source element is being dropped
51 | * @returns {Promise}
52 | */
53 | export async function simulateDrag (sourceElement, targetElement) {
54 |
55 | /* get the coordinates of both elements, note that
56 | left refers to X, and top to Y */
57 | const sourceCoordinates = sourceElement.getBoundingClientRect();
58 | const targetCoordinates = targetElement.getBoundingClientRect();
59 |
60 | const distance = getDistanceBetweenElements(sourceElement, targetElement) + 5;
61 |
62 | /* simulate a mouse down event on the coordinates
63 | of the source element */
64 | const mouseDownEvent = createEvent(
65 | "pointerdown",
66 | {
67 | x: sourceCoordinates.left,
68 | y: sourceCoordinates.top
69 | }
70 | );
71 |
72 | sourceElement.dispatchEvent(mouseDownEvent);
73 |
74 | /* simulate a drag start event on the source element */
75 | const dragStartEvent = createEvent(
76 | "dragstart",
77 | {
78 | x: sourceCoordinates.left,
79 | y: sourceCoordinates.top,
80 | dataTransfer: new DataTransfer()
81 | }
82 | );
83 |
84 | sourceElement.dispatchEvent(dragStartEvent);
85 |
86 | await new Promise((resolve) => setTimeout(() => resolve(), 1000));
87 |
88 | /* simulate a drag event on the source element */
89 | const dragEvent = createEvent(
90 | "drag",
91 | {
92 | x: sourceCoordinates.left,
93 | y: sourceCoordinates.top
94 | }
95 | );
96 |
97 | sourceElement.dispatchEvent(dragEvent);
98 |
99 | /* simulate a drag enter event on the target element */
100 | const dragEnterEvent = createEvent(
101 | "dragenter",
102 | {
103 | x: targetCoordinates.left,
104 | y: sourceCoordinates.top + distance,
105 | dataTransfer: dragStartEvent.dataTransfer
106 | }
107 | );
108 |
109 | targetElement.dispatchEvent(dragEnterEvent);
110 |
111 | /* simulate a drag over event on the target element */
112 | const dragOverEvent = createEvent(
113 | "dragover",
114 | {
115 | x: targetCoordinates.left,
116 | y: sourceCoordinates.top + distance,
117 | dataTransfer: dragStartEvent.dataTransfer
118 | }
119 | );
120 |
121 | targetElement.dispatchEvent(dragOverEvent);
122 |
123 | /* simulate a drop event on the target element */
124 | const dropEvent = createEvent(
125 | "drop",
126 | {
127 | x: targetCoordinates.left,
128 | y: sourceCoordinates.top + distance,
129 | dataTransfer: dragStartEvent.dataTransfer
130 | }
131 | );
132 |
133 | targetElement.dispatchEvent(dropEvent);
134 |
135 | /* simulate a drag end event on the source element */
136 | const dragEndEvent = createEvent(
137 | "dragend",
138 | {
139 | x: targetCoordinates.left,
140 | y: sourceCoordinates.top + distance,
141 | dataTransfer: dragStartEvent.dataTransfer
142 | }
143 | );
144 |
145 | sourceElement.dispatchEvent(dragEndEvent);
146 |
147 | /* simulate a mouseup event on the target element */
148 | const mouseUpEvent = createEvent(
149 | "mouseup",
150 | {
151 | x: targetCoordinates.left,
152 | y: sourceCoordinates.top + distance
153 | }
154 | );
155 |
156 | targetElement.dispatchEvent(mouseUpEvent);
157 | }
158 |
--------------------------------------------------------------------------------
/addon/components/sortable-js.js:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import Sortable from 'sortablejs';
3 | import { bind, next } from '@ember/runloop';
4 | import { action } from '@ember/object';
5 | import { tracked } from '@glimmer/tracking';
6 | import { move, insertAt, removeFrom } from 'ember-sortablejs/utils/array-utils';
7 | import { inject as service } from '@ember/service';
8 |
9 | export default class SortableJsComponent extends Component {
10 | @service dragStore;
11 |
12 | @tracked list = [];
13 |
14 | cachedIdentity = new WeakMap();
15 |
16 | cachedList = null;
17 | hasUpdatedList = false; // Used to prevent unwanted renders. Probably there's a better way to do this.
18 | #sortableContainer = null;
19 | sortableInstance = null;
20 | internalEvents = [
21 | 'onStart',
22 | 'onAdd',
23 | 'onUpdate',
24 | 'onRemove',
25 | 'onEnd',
26 | ];
27 | #events = [
28 | 'onMove',
29 | 'onChange',
30 | 'onChoose',
31 | 'onUnchoose',
32 | 'onSort',
33 | 'onClone',
34 | 'scrollFn',
35 | 'setData',
36 | 'onFilter',
37 | 'onSpill',
38 | ];
39 |
40 | get element() {
41 | return this.args.tag || 'div';
42 | }
43 |
44 | get mappedList() {
45 | return this.list.map((item) => this.cachedIdentity.get(item));
46 | }
47 |
48 | @action
49 | setOptions() {
50 | for (let [key, value] of Object.entries(this.args.options)) {
51 | this.setOption(key, value);
52 | }
53 | }
54 |
55 | /**
56 | *
57 | * @param {HTMLElement} element
58 | */
59 | @action
60 | didInsert(element) {
61 | const defaults = {};
62 | const options = Object.assign({}, defaults, this.args.options);
63 |
64 | this.#sortableContainer = element;
65 |
66 | next(this, () => {
67 | this.sortableInstance = Sortable.create(element, options);
68 | this.setupEventHandlers();
69 | this.setupInternalEventHandlers();
70 | this.setList();
71 | });
72 | }
73 |
74 | @action
75 | setList() {
76 | this.args.items?.forEach((item) => {
77 | const isObject = item && (typeof item === 'object');
78 |
79 | if (!isObject) throw new TypeError('Item is not an Object');
80 |
81 | if (!this.cachedIdentity.has(item)) {
82 | this.setIdentity(item);
83 | }
84 | });
85 | this.list = [...(this.args.items || [])];
86 | }
87 |
88 | @action
89 | cancelDnD() {
90 | if (this.cachedList) {
91 | this.list = [...this.cachedList];
92 | this.cachedList = null;
93 | this.dragStore.dragAddInstance?.cancelDnD();
94 | }
95 | this.dragStore.reset();
96 | }
97 |
98 | willDestroy() {
99 | if (this.isDestroying || this.isDestroyed) return;
100 | this.sortableInstance.destroy();
101 | this.dragStore.reset();
102 | }
103 |
104 | onUpdate(evt) {
105 | const {
106 | newIndex,
107 | oldIndex,
108 | } = evt;
109 |
110 | [this.list[oldIndex], this.list[newIndex]].forEach((item) => this.setIdentity(item));
111 |
112 | this.sync(evt, move(this.list, oldIndex, newIndex));
113 | this.hasUpdatedList = true;
114 | this.args?.onUpdate?.(evt);
115 | }
116 |
117 | onRemove(evt) {
118 | const {
119 | oldIndex,
120 | } = evt;
121 |
122 | if (evt.pullMode !== 'clone') {
123 | this.sync(evt, removeFrom(this.list, oldIndex));
124 | this.hasUpdatedList = true;
125 | }
126 |
127 | this.args?.onRemove?.(evt);
128 | }
129 |
130 | onAdd(evt) {
131 | evt.item.remove();
132 | this.cachedList = [...this.list];
133 | this.dragStore.dragAddInstance = this;
134 | const {
135 | oldIndex,
136 | newIndex,
137 | } = evt;
138 |
139 | const oldItem = this.dragStore.dragStartInstance.list[oldIndex];
140 |
141 | this.setIdentity(oldItem);
142 |
143 | this.sync(evt, insertAt(this.list, newIndex, oldItem));
144 | this.args?.onAdd?.(evt);
145 | }
146 |
147 | onStart(evt) {
148 | this.cachedList = [...this.list];
149 | this.dragStore.dragStartInstance = this;
150 | this.args?.onStart?.(evt);
151 | }
152 |
153 | onEnd(evt) {
154 | if (!this.hasUpdatedList) {
155 | evt.item.remove();
156 | this.list = this.list.map((item) => {
157 | this.setIdentity(item);
158 | return item;
159 | });
160 |
161 | this.sync(evt, this.list);
162 | }
163 |
164 | this.args?.onEnd?.(evt, this.cancelDnD);
165 | this.hasUpdatedList = false;
166 | }
167 |
168 | setIdentity(obj) {
169 | if (obj && (typeof obj === 'object')) {
170 | this.cachedIdentity.set(obj, { value: obj });
171 | }
172 | }
173 |
174 | sync({ item }, changedArray) {
175 | item.remove();
176 | this.list = [...changedArray];
177 | }
178 |
179 | setupEventHandlers() {
180 | this.#events.forEach(eventName => {
181 | const action = this.args[eventName];
182 | if (typeof action === 'function') {
183 | this.sortableInstance.option(eventName, bind(this, 'performExternalAction', eventName));
184 | }
185 | });
186 | }
187 |
188 | setupInternalEventHandlers() {
189 | this.internalEvents.forEach(eventName => {
190 | this.sortableInstance.option(eventName, bind(this, this[eventName]));
191 | });
192 | }
193 |
194 | performExternalAction(actionName, ...args) {
195 | this.args[actionName]?.(...args)
196 | }
197 |
198 | setOption(option, value) {
199 | this.sortableInstance.option(option, value);
200 | }
201 | }
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ember-sortablejs
2 | ==============================================================================
3 | [](https://travis-ci.org/SortableJS/ember-sortablejs)
4 | [](https://emberobserver.com/addons/ember-sortablejs)
5 |
6 | This addon allows you to use drag and drop in your ember application using [SortableJS/Sortable](https://github.com/SortableJS/Sortable)
7 |
8 | Compatibility
9 | ------------------------------------------------------------------------------
10 |
11 | * Ember.js v3.13 or above
12 | * Ember CLI v3.13 or above
13 | * Node.js v10 or above
14 |
15 | Installation
16 | ------------------------------------------------------------------------------
17 | > **NOTE**: The beta version is out. Please give me a hand and test it out.
18 | ```
19 | ember install ember-sortablejs@beta
20 | ```
21 |
22 | This addon has a peer dependency on `sortablejs` that will be installed with the addon
23 |
24 | Still to do
25 | ------------------------------------------------------------------------------
26 | Refer to the upcoming [project](https://github.com/SortableJS/ember-sortablejs/projects/2)
27 |
28 | Library support
29 | ------------------------------------------------------------------------------
30 | Currently supported:
31 | - [x] Drag from one list to another
32 | - [x] Sort
33 | - [ ] Clone
34 | - [ ] Swap
35 | - [ ] Multi Drag
36 | - [ ] Nested List
37 |
38 | Usage
39 | ------------------------------------------------------------------------------
40 |
41 | ```hbs
42 | {{!-- this.list = [{ name: 'item one' }, { name: 'item two' },..] --}}
43 |
35 |
45 | {{else}}
46 | {{outlet}}
47 | {{/if}}
48 |
36 |
39 | Get Started
40 |
41 |
42 |
43 |
44 | Ember-SortableJS
37 |Drag and Drop with sort for ambitious applications
38 |{{item.value.name}}
52 | {{/each}}
53 |