Issue with movable widget using jquery

Issue with movable widget using jquery

 
Hi,
 
I am using movable widgets in my application.
I am using .aspx page and in that aspx page I am loading user controls (.ascx) file dynamically using LoadControl.
Structure of widget (user control) is as follows
 

<%

 @ Control Language ="C#" AutoEventWireup ="true" CodeFile ="TestUserControl.ascx.cs" Inherits ="widget_TestUserControl %>

<

 li class ="Testmod1 NotMovable " id ="mod1 ">

<
div class ="Testmod1-head">
< div class ="Testmod1-head-cont ">
< div class ="sIcon"> </ div >
< span class ="Testmod1Title">
< a href ="/widget/TestPage.aspx" class ="Testmod1TitleNav"> TestHeading </ a >
</ span >
</ div >
</ div >
 
<
div class ="Testmod1-cont" id ="Div1" runat ="server">
////////
//All Code//
////////
</ div>
</ li>
 
Code of .js file is as follows
 

$(document).ready(

function () {

　

var sItems = $('.column > li:not(.static-mod)').not('.NotMovable');

var currentPos;

var currentCol;

//$(sItems).css({cursor: 'move' });

　

$(

".column").sortable({

connectWith:

'.column',

handle:

'.TestMod1-head',

placeholder:

'TestMod1-placeholder',

forcePlaceholderSize:

true,

items: sItems,

revert: 300,

delay: 50,

start:

function (e, ui) {

ht = $(ui.item).height();

wd = $(ui.item).width();

$(

'.TestMod1-placeholder').css({ width: wd + 'px', height: ht + 'px' })

},

stop:

function (e, ui) {

if (!($(ui.item).parent().hasClass("NotMovable"))) {

　

var mid = $(ui.item).attr("id");

var cid = $(ui.item).parent().attr("id");

var cidx = ($(".column").index(ui.item.parent())) + 1;

var pos = "";

$(

"#" + cid + ' li').each(function () {

if (!($(this).hasClass("static-mod")) || ($(this).hasClass("demo-mod"))) {

pos += $(

this).attr("id") + "|";

}

});

　

　

pos = pos.substring(0, pos.length - 1);

changeModPosition(cidx, pos, mid);

}

}

});
 
Currently widgets are movable. If we add css "NotMovable" in li tag then widget is not movable. I have a requirement that widget should not be movable by clicking and dragging on widget header name. Widget should be movable only by clicking and dragging on parts of the widget other than widget header name.
Please let me know how to achieve this.
 
Any help would be greatly appreciated.
Thanks in Advance.
 
Regards,
Rahul Rathi