How do I change a drop placeholder depending on the dragged object in jQuery UI Sortable?

I have modules of different sizes, I want the placeholder to be of the same size of the module being dragged, this is what I have figured out so far...

$( "#col1, #col2, #col3" ).sortable({
  connectWith: ".col",
  start: function(event, ui) {
    var type = ui.item.hasClass("double") ? " double": "";
 开发者_StackOverflow社区 },
  placeholder: "module drop" + type
}).disableSelection();

My problem is that I'm trying to use var "type" outside the scope of start, but I can't figure any other way of doing this.

If anyone wants to play around with the code, I've set up a fiddle here: http://jsfiddle.net/TfcQq/

According to jquery ui documentation ( http://jqueryui.com/demos/sortable/#placeholder ), there is a setter for placeholder. Be careful with spaces in the value, looks like it is a css class.

So you can try :

$( "#col1, #col2, #col3" ).sortable({
    connectWith: '.col'
}).disableSelection();

$(".module").mouseover(function(){
    $( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-single' );
});

$(".module.double").mouseover(function(){
    $( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-double' );
});