Search code examples
jqueryjquery-uijquery-ui-droppablejquery-ui-sortable

Sortable and Droppable: CSS preventing jquery-ui sortable to drag around the dropped items


After getting the answer from this question, I came across another problem - how can I be able to drag the dropped items again?

I have set the css of the dropped items to,

.dropped-items li {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 120px !important;
        height: auto !important;
        border: 1px solid black !important;
    }

But this will prevent jquery-ui sortable to drag around the dropped items.

What can I do?

jsfiffle.


Solution

  • You can get the result you want by not using the css you specified and instead "overwriting" the inline-styles set by jQuery just after the element is appended:

    container.children().last().css({ position: 'relative', top: '', left: '' });
    

    Here's the updated fiddle