Sortable Container Issue

3 posts, 1 answers
  1. Artsem
    Artsem avatar
    2 posts
    Member since:
    Nov 2013

    Posted 04 Nov 2014 Link to this post

    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/@Artsem.Valenchyts@specific-group.by/axIKu (just try to drag the second sortable item).

    Best Regards,
    Artsem
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 06 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Artsem
    Artsem avatar
    2 posts
    Member since:
    Nov 2013

    Posted 06 Nov 2014 in reply to Alexander Valchev Link to this post

    Hello Alexander,

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

    Best Regards,
    Artsem
Back to Top