如何拖动iframe的父div [英] How to drag parent div of iframe

问题描述

我想排序无序列表。列表包含iframe。但我无法拖动列表，因为iframe不允许访问父li。请告诉我如何拖动li。



我尝试过：

 <   ul     id   = 可排序 >  
 <   li     class   =  ui-state-default >  
 <   iframe     name   =  jobManagementWidgetFrame    frameborder   =  0 < span class =code-attribute>   scrolling   =  no    src   =   Widgets / JobManagementWidget.aspx >  <   / iframe  >  
 <   / li  >  
 <   li     class   =  ui-state-default >  
 <   iframe     name   =  jobManagementWidgetFrame    scrolling   = 无    frameborder   =  0    src   =  Widgets / PrinterStatusWidget.aspx >  <   / iframe  < span class =code-keyword>>  
 <   / li  >  
 <   li     class   =  ui-state-default >  
 <   iframe    名称  =  jobManagementWidgetFrame   滚动  =  no    frameborder   =  0    src   = 小部件/ CurrentOrderWidget.aspx >  <   / iframe  >  
 <   / li  >  
 <   li     class   =   ui-state-default >  
 <   iframe     name   =  jobManagementWidgetFr ame   滚动  =  no    frameborder   =  0    src   =  Widgets / PrinterAgentWidget.aspx >  <   / iframe  >  
 <   / li  >  
 <   li     class   =  ui-state-default >  
 < ;   iframe     name  < span class =code-keyword> =  jobManagementWidgetFrame   滚动  =  no    frameborder   =  0    src   =  Widgets / JobManagementWidget.aspx >  <   / iframe  & gt;  
 <   / li  >  
 <   / ul  >  

< script>

$（function（）

{

$（#sortable）.sortable（{

revert：true
}）;





$（ul，li）。disableable（）;

}）;

< / script>



< style type =text / css>

ul

{

宽度：100％;

身高：汽车;

背景 - 颜色：灰色;

list-style-type：none;

保证金：0;

填充：0;

保证金底部：10px;

}

li

{

浮动：左;

保证金：5px ;

填充：5px;

宽度：31％;

身高：360px;

z-index：5;

}

< / style>

解决方案

（function（）

{

（#sortable）。 sortable（{

revert：true

}）;

< br>

（ul，li）。disableRelection（）;

}）;

< / script>



< style type =text / css>

ul

{

宽度：100％ ;

身高：汽车;

背景颜色：灰色;

list-style-type：none;

保证金：0;

填充：0;

保证金底部：10px;

}

li

{

浮动：左;

保证金：5px ;

填充：5px;

宽度：31％;

身高：360px;

z-index：5;

}

< / style>

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>

解决方案

(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>

这篇关于如何拖动iframe的父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！