Html – Custom Helper with jQuery UI Sortable

htmljqueryjquery-uijquery-ui-sortable

I've created a custom helper element with the jQuery UI sortable component.

$(function() {
    $("#sortable").sortable({
        placeholder: "ui-state-highlight",
        helper: function() {
            return $('<tr style="background-color:Fuscia"><td colspan="5" ><table><tr><td class="ui-state-default" style="background-color:Red">[XXXXXXXXXXXX]</td></tr><tr><td colspan="5" class="ui-state-default" style="background-color:Red">[XXXXXXXXXXXX]</td></tr></table></td></tr>');
        },
    });
    $("#sortable").disableSelection();
});

The custom element does in fact appear when I'm dragging an item. However, it overflows the "dragging box" that is apparently a container for whatever is being dragged.

I've posted my code and markup at http://jsfiddle.net/LpyXh/.

Can someone see what I'm missing?

Best Answer

In the CSS add

.ui-sortable-helper
{
   background:none;    
   border:none;   
}

http://jsfiddle.net/LpyXh/2/

Related Topic