I am trying to build a report wizard. What i am doing is that dragging a field form one table & dropping it to a div. I want  actionfunc() to be called when a field is dropped to droppable section. I have defined that in my page.But it is not working.

///////////////////////////////////////////////visualforce page///////////////////////////////////////////////

<apex:page id="page" sidebar="false" controller="describe">
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-1.7.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-ui-1.8.20.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryStable, '/css/cupertino/jquery-ui-1.8.20.custom.css')}"/>

<style>
p{
text-transform:uppercase;
font-family:"Times New Roman", Times, serif;
color:#61210B;
}


.insertImage{background-image:url(http://www.wbsonline.com/images/icon-search-small.gif);
text-align:center;
background-repeat:no-repeat;
padding:10px;
height:0.1px;
width:170px;
font-family:Tahoma;
font-size:14px;
color:#000000;
}
</style>

<script type="text/javascript">

$(function() {
$(".account-Field").draggable({
helper: "clone",
revert: "invalid"
});

$("#content").droppable({
accept: ".account-Field",
drop: function( event, ui ) {
var fieldName = j$(ui.draggable).text();

rerenderPb1();
alert('Hello all');
}
});
//***************************************************//
// modal show //
//***************************************************//

function pleaseWait() {
j$('#content').modal('show');
}


});



</script>

<apex:form id="formid">

<apex:actionFunction name="rerenderPb1" action="{!actionfunc}" status="loadingstatus">
<!--apex:param id="param1" name="node1" value=""/-->
</apex:actionFunction>

<apex:actionStatus id="loadingstatus" onstart="pleaseWait();"/>

<apex:pageBlock title="Report Wizard" id="pb1">
<apex:pageBlockSection columns="3">

<apex:outputPanel >
<p>Search:</p>
<apex:inputText value="{!fieldName}" id="theInputText" styleClass="insertImage" onkeyup="ItemSearch()"/>
<div style="overflow-y:scroll; width:200px; height:400px">
<apex:pageBlocktable value="{!lstOfLabel}" var="da" id="pbt1" title="MY TABLE" >
<apex:column styleClass="account-Field" value="{!da.labelValue}"/>
</apex:pageBlocktable>
</div>
</apex:outputPanel>

<div id="content" style="background-color:#EEEEEE;height:400px;width:800px;float:left;">

</div>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

/////////////////////////////////class///////////////////////////////////////////////////////

public class describe {

Public List<String> fields{get;set;}
public List<WrapperFieldDetails> lstOfLabel{get;set;}
public Integer counter{get;set;}
public List<WrapperFieldDetails> selectedField{get;set;}
public List<Account> searchResList { get; set; }
Public String fieldName{get;set;}
Public List<sObject> recordList {get; set;}
Public static List<String> selectedFieldList {get; set;}

Public describe()
{
Map<String, Schema.SObjectField> fieldMap= Schema.SObjectType.Account.fields.getMap();
lstOfLabel=new List<WrapperFieldDetails>();
counter=1;

for (String fieldName: fieldMap.keySet())
{
WrapperFieldDetails wca = new WrapperFieldDetails();
wca.idOfEachField=counter;
//wca.isSelected=false;
wca.labelValue=fieldMap.get(fieldName).getDescribe().getLabel();
lstOfLabel.add(wca);
counter=counter+1;
}
}

Public void actionfunc()
{
system.debug('action method is fired');
}

public class WrapperFieldDetails
{
public Integer idOfEachField{get;set;}
public String labelValue{ get; set; }
//public Boolean isSelected{get;set;}
}
}