[BUG] - Multiple Container Sortable Bug on touch devices

[savilllla]

Screen Shot. https://app.screencast.com/MMorMRlxBf8VK When i use 1 finger to touch on a sortable item and use another finger to touch on another sortable item and sort it. The container will broken. How can allow only 1 touch

[bryan844]

uses this code below for two sortable instances import { Sortable } from '@shopify/draggable';

// Initialize the first sortable instance const sortable1 = new Sortable(document.querySelectorAll('.sortable-container-1'), { draggable: '.sortable-item', handle: '.handle', // optional: specify a drag handle mirror: { constrainDimensions: true, }, });

// Initialize the second sortable instance const sortable2 = new Sortable(document.querySelectorAll('.sortable-container-2'), { draggable: '.sortable-item', handle: '.handle', mirror: { constrainDimensions: true, }, });

// Event handler to manage sortable states let activeSortable = null;

// Listen to drag start on sortable1 sortable1.on('drag:start', (evt) => { console.log('Sortable 1 drag started');

// If sortable2 was active, destroy or disable it if (activeSortable === 'sortable2') { sortable2.destroy(); console.log('Sortable 2 closed'); }

activeSortable = 'sortable1'; });

// Listen to drag start on sortable2 sortable2.on('drag:start', (evt) => { console.log('Sortable 2 drag started');

// If sortable1 was active, destroy or disable it if (activeSortable === 'sortable1') { sortable1.destroy(); console.log('Sortable 1 closed'); }

activeSortable = 'sortable2'; });

// Optional: Listen to other events sortable1.on('drag:stop', (evt) => { console.log('Sortable 1 drag stopped'); });

sortable2.on('drag:stop', (evt) => { console.log('Sortable 2 drag stopped'); });

// Optional: Listen to sort events sortable1.on('sortable:sort', (evt) => { console.log('Sortable 1 sorted', evt); });

sortable2.on('sortable:sort', (evt) => { console.log('Sortable 2 sorted', evt); });

[bryan844]

uses the following code below for two sortable instances import { Sortable } from '@shopify/draggable';

// Initialize the first sortable instance const sortable1 = new Sortable(document.querySelectorAll('.sortable-container-1'), { draggable: '.sortable-item', handle: '.handle', // optional: specify a drag handle mirror: { constrainDimensions: true, }, });

// Initialize the second sortable instance const sortable2 = new Sortable(document.querySelectorAll('.sortable-container-2'), { draggable: '.sortable-item', handle: '.handle', mirror: { constrainDimensions: true, }, });

// Event handler to manage sortable states let activeSortable = null;

// Listen to drag start on sortable1 sortable1.on('drag:start', (evt) => { console.log('Sortable 1 drag started');

// If sortable2 was active, destroy or disable it if (activeSortable === 'sortable2') { sortable2.destroy(); console.log('Sortable 2 closed'); }

activeSortable = 'sortable1'; });

// Listen to drag start on sortable2 sortable2.on('drag:start', (evt) => { console.log('Sortable 2 drag started');

// If sortable1 was active, destroy or disable it if (activeSortable === 'sortable1') { sortable1.destroy(); console.log('Sortable 1 closed'); }

activeSortable = 'sortable2'; });

// Optional: Listen to other events sortable1.on('drag:stop', (evt) => { console.log('Sortable 1 drag stopped'); });

sortable2.on('drag:stop', (evt) => { console.log('Sortable 2 drag stopped'); });

// Optional: Listen to sort events sortable1.on('sortable:sort', (evt) => { console.log('Sortable 1 sorted', evt); });

sortable2.on('sortable:sort', (evt) => { console.log('Sortable 2 sorted', evt); });

[bryan844]

use the folowing code below for two sorttable instances import { Sortable } from '@shopify/draggable';

// Initialize the first sortable instance const sortable1 = new Sortable(document.querySelectorAll('.sortable-container-1'), { draggable: '.sortable-item', handle: '.handle', // optional: specify a drag handle mirror: { constrainDimensions: true, }, });

// Initialize the second sortable instance const sortable2 = new Sortable(document.querySelectorAll('.sortable-container-2'), { draggable: '.sortable-item', handle: '.handle', mirror: { constrainDimensions: true, }, });

// Event handler to manage sortable states let activeSortable = null;

// Listen to drag start on sortable1 sortable1.on('drag:start', (evt) => { console.log('Sortable 1 drag started');

// If sortable2 was active, destroy or disable it if (activeSortable === 'sortable2') { sortable2.destroy(); console.log('Sortable 2 closed'); }

activeSortable = 'sortable1'; });

// Listen to drag start on sortable2 sortable2.on('drag:start', (evt) => { console.log('Sortable 2 drag started');

// If sortable1 was active, destroy or disable it if (activeSortable === 'sortable1') { sortable1.destroy(); console.log('Sortable 1 closed'); }

activeSortable = 'sortable2'; });

// Optional: Listen to other events sortable1.on('drag:stop', (evt) => { console.log('Sortable 1 drag stopped'); });

sortable2.on('drag:stop', (evt) => { console.log('Sortable 2 drag stopped'); });

// Optional: Listen to sort events sortable1.on('sortable:sort', (evt) => { console.log('Sortable 1 sorted', evt); });

sortable2.on('sortable:sort', (evt) => { console.log('Sortable 2 sorted', evt); });