如何使用 jquery 从中心拖动 iframe？答案

【问题标题】：How to make iframe draggable from center using jquery?如何使用 jquery 从中心拖动 iframe？
【发布时间】：2016-06-23 14:27:05
【问题描述】：

我制作了一个 iframe，我想使用 jqueryui 使其可拖动，但它只是从 div 的角落拖动，谁能告诉我如何使 iframe 可从中心拖动？以下是我的代码：

 <html>
<head>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            $( ".main" ).draggable({cancel:null});
        });
    </script>
    <style type="text/css">
        .main{
            background-color:transparent;
            height: 100px;
            width: 100px;
        }
        .main2{                     
            height: 100%;
            width: 100%;
        }
    </style>            
    <div class="main">
        <iframe src="https://www.youtube.com/v/nkS_Ar0Yad0"></iframe>
    </div>          
</body>
</html>

【问题讨论】：

我创建了一个 jsfiddle，但从你的代码看来它似乎不可拖动：jsfiddle.net/silviagreen/n8L06vka
它是从 div 的一角拖动，但我想让它从 iframe 的中心拖动，可以吗？

标签： jquery jquery-ui draggable

【解决方案1】：

对于快速解决方案，您可以将 iframe CSS 设置为：

iframe{
  position:relative;
  z-index:-1;
}

但您可能无法在 iframe 内导航（我没有对此进行测试）。所以我推荐你这个post

【讨论】：