jquery-ui-droppable-iframe
v1.0.1
Published
Use your droppable zones inside iframe
Downloads
39
Maintainers
Readme
jquery-ui-droppable-iframe
##Use your droppable zones inside iframe!
Plugin features:
- Fix droppable position inside iframe
- You can use iframe scroll, while you are dragging
- After scroll droppable position works perfect
- Works even in IE and Edge
- You can use native scrollSensitivity and scrollSpeed params
##Installation
npm install jquery-ui-droppable-iframe
##Usage
<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
//After frame loaded
$("#testframe").load(function() {
//Activate droppable zones
$(this).contents().find('.droppable').droppable({
drop: function(event, ui) {
//ACTION ON DROP HERE
}
});
});
//Activate draggable zones
$('.draggable').draggable({
iframeFix: true, //Core jquery ui params needs for fix iframe bug
iframeScroll: true //This param needs for activate iframeScroll
});
});
</script>