jQuery 마우스 드래그(drag)시 iframe 위에서 컨트롤 잃는 현상과 해결 방안

황제낙엽 2017.12.12 10:27 조회 수 : 18319

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  

QUESTION : https://github.com/ducksboard/gridster.js/issues/268

SOLUTION : https://www.cocept.io/blog/development/gridster-breaks-iframe-drag-drop/

 

This is a common problem with drag and drop, and can be fixed relatively easily by covering your iframe with a transparent element that is hidden by default. When the drag starts, the element is shown. When the drag stops, the element is hidden.

  • Add the following HTML to each <li> widget:
  <div class="overlay_fix"></div>
view rawgridster-overlay-fix.html hosted with ❤ by GitHub
  • Add the following CSS to the <head> element of your page
  .overlay_fix {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  opacity: 0;
  display: none;
  }
view rawgridster-overlay-fix.css hosted with ❤ by GitHub
  • Change your Gridster instantiation javascript to specify the overlay_fix_start and overlay_fix_stop functions for the draggable.startand draggable.stop events:
  var overlay_fix_start = function() {
  $('.overlay_fix').show();
  }
   
  var overlay_fix_stop = function() {
  $('.overlay_fix').hide();
  };
   
  // initiate gridster with the above functions executed each time a drag is started / stopped
  $(".gridster ul").gridster({
  widget_margins: [10, 10],
  widget_base_dimensions: [140, 140],
  draggable: {
  start: overlay_fix_start,
  stop: overlay_fix_stop
  }
  });
view rawgridster-overlay-fix.js hosted with ❤ by GitHub

 

Now when you start dragging an element, the entire <li> is covered with a full size transparent <div> that covers the mouse over event of the iframe and your drag should never stop, even if you mouse over the location of the iframe.

 

 

 

 

 

 

 

QUESTION : https://stackoverflow.com/questions/14698419/preserve-iframe-content-on-drag

SOLUTION : http://jsfiddle.net/5QL7W/27/

 

내용이 너무 많아서 생략

 

 

 

 

 

 

 

 

 

 

QUESTION : https://stackoverflow.com/questions/30842870/jquery-ui-dragging-over-iframe-lost-the-drag

SOLUTION : http://jsfiddle.net/m9kveakv/10/

 

<h3>Pick a number on the SIDE MENU and drag t inside the iframe. Then make a fast drag (in order the mouse goes out the number div area)</h3>

 

<div class="container">

    <div class="side-menu">

        SIDE MENU

        <ul id="draggable">

          <li class="ui-state-default">1</li>

          <li class="ui-state-default">2</li>

          <li class="ui-state-default">3</li>

          <li class="ui-state-default">4</li>

          <li class="ui-state-default">5</li>

        </ul>

    </div>

    <div class="content">

        

        <iframe src="http://www.w3schools.com"></iframe>

        

    </div>

    

</div>

 

  $(function() {

      $( "#draggable li" ).draggable({

          revert: true,

          iframeFix: true

      });

  });

이 게시물을
목록
쓰기 태그