CODEWITHSUNDEEP
jqueryjquery-ui
melvin
melvin

Reputation: 2621

jQuery sortable list placeholder issue

I have a sortable list. I have managed to sort into multilevel. But when an element from first level depth is inserted into second level depth the placeholder keeps running violently. 

$('.sortable').sortable({ 
    connectWith:    '.sortable',
    cursor:         'move',
    placeholder:    'sortable-placeholder',
    handle:         '.block-title',
    cursorAt:       { left: 150, top: 17 },
    /*tolerance:      'pointer',*/
    scroll:         false,
    zIndex:         9999,
});
$('.sortable').disableSelection();

Here is my fiddle

Upvotes: 0

Views: 563

Answers (1)

Marinos An
Marinos An

Reputation: 10816

This seems to be an issue with the specific version of jquery/jquery ui. On jquery-1.9.1/ui-1.9.2 the problem with flickering disappeared:

https://jsfiddle.net/x2dnmL0j/

UPDATE: If you cannot get rid of old jquery you can use the old/new jquery versions in parallel. New jquery will be accessible under another namespace. See: jquery.noconflict

<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script>
    //This means that jquery  declared first  will be maintained with standard namespace and last one will get the name $3.
    var $3 = jQuery.noConflict(true)

    console.log("old:",$.fn.jquery, $.ui.version)
    console.log("new:",$3.fn.jquery, $3.ui.version)

    </script>

</head>

Upvotes: 1

Related Questions