How to drag parent div of iframe

See more:

ASP.NET

Javascript

HTML

Hi,
I want to sort unordered list. the lists contains iframes.but i couldn't drag the list, because the iframe wouldn't allow to access parent "li". please tell me how to drag the "li".

What I have tried:

<ul id="sortable">
      <li class="ui-state-default">
          <iframe name="jobManagementWidgetFrame" frameborder="0" scrolling="no" src="Widgets/JobManagementWidget.aspx"></iframe>
      </li>
      <li class="ui-state-default">
          <iframe name="jobManagementWidgetFrame" scrolling="no" frameborder="0" src="Widgets/PrinterStatusWidget.aspx"></iframe>
      </li>
      <li class="ui-state-default">
          <iframe name="jobManagementWidgetFrame" scrolling="no" frameborder="0" src="Widgets/CurrentOrderWidget.aspx"></iframe>
      </li>
      <li class="ui-state-default">
          <iframe name="jobManagementWidgetFrame" scrolling="no" frameborder="0" src="Widgets/PrinterAgentWidget.aspx"></iframe>
      </li>
      <li class="ui-state-default">
          <iframe name="jobManagementWidgetFrame" scrolling="no" frameborder="0" src="Widgets/JobManagementWidget.aspx"></iframe>
      </li>
    </ul> 

<script>
$(function ()
{
$( "#sortable" ).sortable({
revert: true
});


$( "ul, li" ).disableSelection();
} );
</script>

<style type="text/css">
ul
{
width:100%;
height:auto;
background-color:gray;
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li
{
float:left;
margin: 5px;
padding: 5px;
width:31%;
height:360px;
z-index:5;
}
</style>