[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);
});