I  want to make the column of pageblocktable dragable to adjust the size of column. Code below is working:--

<apex:page standardController="Account" tabStyle="Account" recordSetVar="accounts">
<apex:includeScript value="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js"/>
<apex:includeScript value="//cdn.jsdelivr.net/jquery.colresizable/1.3/colResizable.min.js"/>
<apex:sectionHeader title="colResizable" subtitle="Resize columns"/>
<apex:form >
<apex:pageBlock title="Accounts" mode="edit">
<apex:pageBlockTable id="tbl" value="{!accounts}" var="Con"> <apex:column value="{!Con.Name}" >
<apex:facet name="header">Name</apex:facet>
</apex:column>
<apex:column value="{!Con.Industry}"/>
<apex:column value="{!Con.Type}"/>
<apex:column value="{!Con.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
<script type="text/javascript">
var j= $("[id$=tbl]").colResizable({ liveDrag: true, draggingClass: "dragging" });
</script>
</apex:page>


But how to apply same logic here . You can see the below code is different and complex unlike the above one . Please help:--

<apex:pageBlock id="PLPageBlock" title="{!$Label.Main_Title}">
<apex:pageMessages id="errorMessages"></apex:pageMessages>
<div id="plitablediv" style="flex-direction: column; overflow-x:scroll; max-height: 300px;">
<apex:pageBlockTable id="p" value="{!productLines}" var="pl" onRowClick="fixInlineEditBug(); productLineSelected(this);">
<apex:column style="width:1%;" >
<apex:facet name="header">
</apex:facet>
<span style="display:none;" id="plid">{!pl.ident}</span> </apex:column> <apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:commandLink rendered="{!pl.item.Id != null}" value="Detail" onclick="window.open('/{!pl.item.Id}'); return false;" /> <br /> <apex:commandLink value="{!$Label.Delete_Item}" onclick="if(confirm('{!$Label.Delete_Confirmation}')){delProductLine('{!pl.ident}');} return false;" />
<apex:facet name="header">{!$Label.Action}</apex:facet>
</apex:column>
<apex:column id="d" styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}"> <div id="draggable1" class="ui-widget-content"> <p>Drag me around 1</p> </div>
<apex:facet name="header">Satya </apex:facet> <span style="display:none;" id="plid">{!pl.ident}</span>
</apex:column>
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.CBG_ItemLine__c}" rendered="{!!massEdit}"/>
<apex:inputField value="{!pl.item.CBG_ItemLine__c}" rendered="{!massEdit}" onkeypress="return fireSave(event);"/>
<apex:facet name="header">{!$ObjectType.ProductLineItem__c.fields.CBG_ItemLine__c.Label}</apex:facet>
</apex:column>
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.RecordTypeId}" >
<apex:inlineEditSupport disabled="true"/>
</apex:outputField> <apex:facet name="header">{!$Label.Record_Type}</apex:facet>
</apex:column>