jQuery Draggable Handler внутри IFrame

Question

jQuery Draggable Handler внутри IFrame

Что за глоток.

В основном у меня есть родитель

и внутри этого

  </code>. Мне нужен элемент внутри iframe, чтобы быть ручкой для перетаскивания родительского div. Это вообще возможно? </p>

<p> Я пытался: </p>

<pre><code>$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);
</code></pre>

<p> Он нацелен на правильный элемент DOM, но он просто не будет тянуть. Может быть возможно наложить скрытый div поверх iframe, но я обнаружил, что iframe переносит событие над div, когда позиция абсолютна. Странно. </p>         </div>
         <div class="votes-question">
            <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i>
         </div>
         <div class="tags">
            <a href="/questions/tagged/jquery-ui" class="tag"  title="jquery-ui" rel="tag">jquery-ui</a> <a href="/questions/tagged/iframe" class="tag"  title="iframe" rel="tag">iframe</a> <a href="/questions/tagged/draggable" class="tag"  title="draggable" rel="tag">draggable</a>         </div>
         <div class="clearfix"></div>
         <div class="action-time">
            задан Louis            <span title="7 August 2010 в 01:20 ">7 August 2010 в 01:20 </span>
         </div>
         
         <a class="s-link" href="/questions/452854/jquery-draggable-handler-vnutri-iframe" title="поделиться">поделиться</a>
      </div>
   </div>
  <div style="height:100px;margin:10px 0px;" class="">

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- siteask before post --> <ins class="adsbygoogle"      style="display:block;height:100px"
                                                                                                                             data-ad-client="ca-pub-2355906945027976"
                                                                                                                             data-ad-slot="" data-ad-format="auto"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

    </div>
   <div class="answers" id="answers">
   
      <h2 class="pull-left"><span itemprop="answerCount">2</span> ответа</h2>
      <div class="clearfix"></div>

      <div class="answer-pager">
         <div class="pagination">
                     </div>
      </div>

         
         <div class="answer accepted" id="978661" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer">
            <div class="answer-row">
               <div class="answer-text">
                  <div class="description" itemprop="text">
                     <p> Я решил нанести удар, и, черт возьми, это большая работа с небольшим прогрессом с использованием внутреннего узла iframe в качестве дескриптора. В любом случае, вот два решения, первое работает не очень хорошо, но если вы сможете заставить его работать, это может быть более желательным. </p>

<p> main.html (заимствовано из демонстрации) </p>

<pre><code>&lt;div id="draggable" class="ui-widget-content" style="position:relative;"&gt;
    &lt;p class="ui-widget-header"&gt;I can be dragged only by this handle&lt;/p&gt;
    &lt;iframe name="iframe1" src="inner-handle.html" height=50 width=80&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p> inner-handle.html </p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script type="text/javascript" src="../../jquery-1.4.2.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="innerHandle"&gt;handle&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p> JavaScript </p>

<pre><code>$(function () {
    var moveEvent;
    $(document).mousemove(function (e) {
        moveEvent = e;
    });

    $("#draggable").draggable();
    $('iframe', '#draggable').load(function () {
        $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
            $('#draggable').draggable().data('draggable')._mouseDown(moveEvent);
            return false;
        });
    });
});
</code></pre>

<p> Мне потребовалось время, чтобы найти что-то, что «работало». Проблема заключалась в том, что, поскольку событие mousedown произошло на элементе внутри iframe, событие мыши относится к iframe, а не к основному документу. Обходной путь состоит в том, чтобы иметь событие перемещения в документе и захватывать позицию мыши оттуда. Проблема, опять же, в том, что если мышь находится внутри iframe, она «не» движется в соответствии с родительским документом. Это означает, что событие перетаскивания происходит только тогда, когда указатель мыши достигает края iframe в родительский документ. </p>

<p> Чтобы решить эту проблему, можно вручную сгенерировать события с рассчитанной позицией iframe относительно движения мыши. Поэтому, когда ваша мышь перемещается внутри iframe, рассчитайте ее движение, используя координату iframe для родительского документа.Это означает, что вам нужно использовать событие из mousedown, а не mousemove, </p>

<pre><code>$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
    // do something with e
    $('#draggable').draggable().data('draggable')._mouseDown(e);
    return false;
});
</code></pre>

<p> Второе решение - это способ, которым вы упомянули, иметь абсолютное позиционирование div над самим iframe. У меня нет проблем с размещением div поверх iframe, то есть </p>

<pre><code>&lt;div id="draggable" class="ui-widget-content" style="position:relative;"&gt;
    &lt;p class="ui-widget-header"&gt;I can be dragged only by this handle&lt;/p&gt;
    &lt;iframe name="iframe1" src="inner-handle.html" height=50 width=80&gt;&lt;/iframe&gt;
    &lt;div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p> Проблема с тем, что ваш div находится за iframe, может быть из-за того, что z-index отключен. Если вы объявите свой div перед iframe и не указали z-index, тогда iframe будет наверху. </p>

<p> Какой бы путь вы ни выбрали, удачи! </p>                  </div>
                  <div class="votes-answer green">
                     
                     <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="8 December 2019 в 17:17 ">8 December 2019 в 17:17 </span>
                  </div>
                  <a class="s-link" href="/questions/452854/jquery-draggable-handler-vnutri-iframe#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-978661">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
            
         <div class="answer" id="978664" itemscope="" itemtype="http://schema.org/Answer">
            <div class="answer-row">
               <div class="answer-text">
                  <div class="description" itemprop="text">
                     <p> что произойдет, если вы сделаете это (с активированным <a href="http://getfirebug.com/" rel="nofollow noreferrer"> firebug </a>): </p>

<pre><code>var frameContent = $('iframe',node).contents()
var handle = frameContent.find('#handle');
console.debug(frameContent, handle)
</code></pre>

<p> Содержит ли <code> дескриптор </code> список элементов? И если это так, внимательно посмотрите на объект <code> Document </code>, который является <code> frameContent </code> - это URL <code> «about: blank» </code>? Это просто догадка, но если вы получите эти выходные данные, вероятно, он выполняет селектор jQuery <em> до </em> загрузки содержимого кадра (т.е. до того, как существует элемент <code> #handle </code>). </p>

<p> В этом случае вы можете добавить событие в документ IFRAME и связаться с родительским фреймом через <code> window.parent </code>. </p>                  </div>
                  <div class="votes-answer">
                     
                     <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="8 December 2019 в 17:17 ">8 December 2019 в 17:17 </span>
                  </div>
                  <a class="s-link" href="/questions/452854/jquery-draggable-handler-vnutri-iframe#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-978664">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
               <div style="margin-top: 20px;">
          Другие вопросы по тегам:          <div class="tags" style="display: inline-block; float: none;">
         <a href="/questions/tagged/jquery-ui" class="tag"  title="jquery-ui" rel="tag">jquery-ui</a> <a href="/questions/tagged/iframe" class="tag"  title="iframe" rel="tag">iframe</a> <a href="/questions/tagged/draggable" class="tag"  title="draggable" rel="tag">draggable</a>       </div>
        <h3 class="m-t-20">Похожие вопросы:</h3>

        <div class="related-block">
          <ul>
                          <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11688/ustanovit-vy-sotu-div-v-ne-rabotaet-dublirovat" title="Установить высоту div в% не работает [дублировать] ">Установить высоту div в% не работает [дублировать] </a> - 15 July 2015 15:37 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>24</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/963/iframe-not-rendering-duplicate" title="Iframe Not rendering [duplicate] ">Iframe Not rendering [duplicate] </a> - 12 March 2012 20:01 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>24</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/19739/vstavit-bbc-newz-live-z-tream-onto-web-page-dublirovat" title="Вставить BBC News Live Stream Onto Web Page [дублировать] ">Вставить BBC News Live Stream Onto Web Page [дублировать] </a> - 12 March 2012 20:01 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>21</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/12989/jquery-click-event-ne-rabotaet-s-jquery-draggable-funkciya-dublikat" title="jquery click event не работает с jquery draggable ();  функция [дубликат] ">jquery click event не работает с jquery draggable ();  функция [дубликат] </a> - 2 December 2016 11:27 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>20</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/2245/jquery-cel-klassa-kotory-j-ne-by-l-na-stranice-zagruzki-dublikat" title="Jquery Цель класса, который не был на странице загрузки [дубликат] ">Jquery Цель класса, который не был на странице загрузки [дубликат] </a> - 2 December 2016 11:27 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>20</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/12227/iframe-rez-ize-mezhsajtovy-j-domen-dublikat" title="iframe Resize (межсайтовый домен) [дубликат] ">iframe Resize (межсайтовый домен) [дубликат] </a> - 30 March 2016 12:10 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>16</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/190286/pochemu-razrabotchiki-nenavidjat-iframes-dublikat" title="Почему разработчики ненавидят iframes? [дубликат]">Почему разработчики ненавидят iframes? [дубликат]</a> - 23 May 2017 00:31 </li>
                          </ul>
        </div>

      </div>
   </div>
   
</div>      </div>
      <aside class="sidebar">
        <div class="awrap">

<script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script>
<script>
    (yaads = window.yaads || []).push({
        id: "553274-2",
        render: "#id-553274-2"
    });
</script>
<div id="id-553274-2"></div>
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-2355906945027976"
     data-ad-slot="8038370725"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


        </div>
      </aside>

    </div>
  </div>
  <footer class="footer">
    <div class="wrapper wrapper--sm">
      <div class="footer-navs-col">
        <div class="footer-nav footer-nav--menu">

          <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div>
        </div>
        <div class="footer-nav footer-nav--catalog">
        </div>
      </div>
      <div class="footer-contacts-col">
        <div class="soc-widget-col">
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

  </footer>

</div>

<script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script>

<script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script>


<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script>

<script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>


<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123993370-1');
</script>

</div>
<script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Программирование - вопросы и ответы",
  "alternateName": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "potentialAction": {
     "@type": "SearchAction",
     "target": "https://legkovopros.ru/search?search={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "logo": "https://legkovopros.ru/i/logo.png",
  "email": "info@legkovopros.ru",
   "telephone": ""

}




</script>
</body>
</html>