Sortable Container Issue

[Artsem]

Hello,

I have an issue when using two or more sortables with same container selector on one page. The problem appears when the width of one sortable differs from another (I use horizontal sortables). The second and others sortables take the sizes (in my case it is width) of the first, but it's wrong. I understand that changing the container's selector (select by id etc.) for each sortable will solve the problem, but in my case/project it's not possible, I had to leave the selector as it is (sortable is used in directive which can be reused several times on one page). 
Is there any way to workaround this issue not changing the selectors? 
Sample page can be found here http://dojo.telerik.com/@[e-mail]/axIKu (just try to drag the second sortable item).

Best Regards,
Artsem

[Alexander Valchev]

Hi Artsem,

Thank you for contacting us.

The behaviour that you described is expected. The issue occurs because the jQuery.offset method is used to obtain container boundaries and the jQuery.offset method returns the current coordinates of the first element in the set of matched elements, relative to the document.

What is more important is that the container element is not necessary to be the Sortable element or child of the Sortable element, there is no way for us to determine which exactly element of the collection is the right container.

In order to fix the issue you have to specify the correct container either via change in the selector or via index. For example:

angular.module('kendoSortableApp', ['kendo.directives']).controller('MainController', ['$scope', function($scope) {
    $scope.sortableOneOptions = {
        filter: 'div.sortable-item',
        container: $('div.sortable-container').eq(1),
        axis: 'x'
    };

    $scope.sortableTwoOptions = {
        filter: 'div.sortable-item',
        container: $('div.sortable-container').eq(0),
        axis: 'x'
    };
}]);

I hope this information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Artsem]

Hello Alexander,

Thank you for quick response. Your post clarifies a lot.

Best Regards,
Artsem