| 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:
- Add the following CSS to the <head> element of your page
- Change your Gridster instantiation javascript to specify the overlay_fix_start and overlay_fix_stop functions for the draggable.startand draggable.stop events:
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
});
});
