Several points:
When you're asking a client-side Javascript question, it would be best not to muddy the waters with your server-side markup. So non-HTML templates like this should probably either be expanded (from, say, View Source) or removed:
{% extends "dashboard.html" %} {% block headercontent %}
Your code already has an example of adding a class on drop (at least if I'm guessing correctly about the jQuery drag-and-drop; it's been a long time) in this block.
drop: function( event, ui ) { $( this ) .addClass( "fullbowl" ) ^^^^^^^^^^^^^^^^^^^^^^^^ .find( "div" ) .html( "" );
So you can either duplicate this if it's a different group of sortables you want to style and add a different class, add a second
addClass('something')
call to this one -- which would be fine -- or change the CSS forfullbowl
to include your new properties. Lots of options.
Update
With your new Fiddle, it's easier to test, and it becomes straightforward to notice that you're not using an event of JQuery UI's sortable
API, but one from droppable
. If you used stop
, from sortable
, it works fine:
$( "#sortable2" ).sortable({
connectWith: "div",
stop: function( event, ui ) {
ui.item.addClass( "fullbowl" )
}
});
You can see it in action on my fork of your Fiddle.