jQuery sortable resize on remove

Quite a simple question ive got a few sortable unordered lists

1. with images that resized to the div by absolute and the li which class .image_block which has width/height and float at 100px so something 开发者_开发百科like this

<ul>

<li class='.image_block'><img src="pic.png"</li>

<li class='.image_block'><img src="pic1.png"</li>

<li class='.image_block'><img src="pic2.png"</li>

<ul>

1. And a few other seperate lists which have different li heights and widths

so what i want to acheive is as soon as i drag a picture from one of the random width/height it adds .image_block

And at the moment i have this which is not working

    $(".dragable_column").sortable({opacity: 0.8, cursor: 'move',connectWith: ['.dragable_column','.dragable_userimages'],

    receive: function(event, ui) {
        $(this).removeClass(".image_block");
 },

    start: function(event, ui) {
        $(this).addClass(".image_block");
    } 

});

$(".dragable_userimages").sortable({opacity: 0.8,axis: 'x', cursor: 'move',connectWith: ['.dragable_column'],
    receive: function(event, ui) {
        $(this).addClass(".image_block");
 }

});

Any help would be greatly aprriciated

The . character should not be part of the class name. Indeed, it is an illegal character in class names. You are confusing CSS/jQuery selectors with element classes. The selector .image_block is the same as saying "the element with the class image_block", i.e. without the ..

Try changing your code to use the class image_block instead.

Also, your HTML is wonky. Apart from anything else, you need to close your img tags and use </ul> to close your list, not <ul>.

Okay well i figured out to do it knew it was simple just had to change the width and height of the ui.helper object with so heres how i done it

$(".dragable_column").sortable({opacity: 0.8, cursor: 'move',connectWith: ['.dragable_column','.dragable_userimages'],

    receive: function(event, ui) {
        $(ui.item).removeClass("image_block");
        var height = $(this).attr("row_height");
        $(ui.item).attr("style","height:"+height+";");


    },

    start: function(event, ui) {
    $(ui.helper).width(100).height(100);

    } 
});

$(".dragable_userimages").sortable({opacity: 0.8, cursor: 'move',connectWith: ['.dragable_column'],
    receive: function(event, ui) {
        $(ui.item).attr("style","");
        $(ui.item).addClass("image_block");
    }
});

I found this solution that works perfectly:

$("ul.sortable").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
        // Resize elements
        $(this).sortable('refreshPositions'); 
    }
});

Source: http://forum.jquery.com/topic/reducing-the-size-of-elements-before-sorting-them-using-sortable