Add class on drop event for image puzzle

Question

Hey guys i am using Django templeting system and bootstrap for a project where i have a reuirement of jquery image drag and drop. I dont have any knowledge of jquery or javascript. So far i have implemented the image drag and drop but now i want to add a class on drop event.

Here in my requirement i have a image cut out in five pieces. Each pieces are stored in one container. user can drag a piece to drop it in another container to complete the image. but when i am droping it in another container all the images are aligned vertically instead of geeting joined to previous piece.

so i have decided to add a class on drop event which can add style="position:absolute; property to image.

I hope u have understood my problem. i know this is a nub question but please help we with code

Here i have added it on jsfiddle http://jsfiddle.net/binit/JnYB9/ So that you can play around help me

code

---

<script>
$(function() {

$( "#sortable1" ).sortable({
connectWith: "div"
});

$( "#sortable2" ).sortable({
connectWith: "div"

 });

$( "#sortable1, #sortable2" ).disableSelection();
 });
</script>

{% endblock headercontent %}


{% block content %}

<div class="row-fluid" >
    <div class="span4">
        <div class="span1"></div>
        <div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
            <legend>Collect Coupon parts</legend>
            1st part
            <img class="ui-state-highlight" src="{% static 'images/demo/north.png' %}" >
            2nd part
            <img class="ui-state-highlight" src="{% static 'images/demo/south.png' %}" >
            3rd part
            <img class="ui-state-highlight" src="{% static 'images/demo/east.png' %}" >
            4th part
            <img class="ui-state-highlight" src="{% static 'images/demo/west.png' %}" >
            5th part
            <img class="ui-state-highlight" src="{% static 'images/demo/center.png' %}"  >
        </div>
    </div>
    <div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">

        <legend>Canvas section</legend>
     </div>
</div>

Answer 1

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 for fullbowl 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.