Question

I’m using jQuery UI Sortable function.

Javascript

$('#sortablelist).sortable{
     update: function(ev, ui){...}, 
     placeholder: "ui-state-highlight",
     connectWith: ".ui-sortable" 
}

By default, dropOnEmpty = true so I don’t set it.

Because the list is empty, but I want to give it a ‘placeholder’ target in the empty list, I have given the sortablelist div an additional helper class to give the empty #sortablelist some ‘surface area’ to drop-into so to speak (so that you get a placeholder when you drag an element over the attached list)

HTML

<div id="sortablelist" class="ui-sortable ui-sortable-helper"></div>

CSS

.ui-sortable-helpclass {
    height: 100px;
    width: 100%;
}

This works in Firefox, IE, Safari, but the placeholders will not appear (thus no area to drop to in Google Chrome

Any thoughts?

Answer 1

The only way I was able to solve this was by adding padding to the list.

#sortablelist {
  padding: 16px 21px !important;
}

You might not need the !important, I needed it to override some higher priority padding that I couldn’t track down.