I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container.
Although I have successfully implemented the drag and drop event, I am struggling to add CSS styles after the drop event. Here is a JSFiddle link for reference: http://jsfiddle.net/binit/JnYB9/
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: "div"
});
$( "#sortable2" ).sortable({
connectWith: "div"
});
$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
<body>
<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>