jud

jquery-ui-droppable-iframe

Use your droppable zones inside iframe

Showing:

Popularity

Downloads/wk

11

GitHub Stars

17

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

2

Size (min+gzip)

0.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jquery-ui-droppable-iframe

##Use your droppable zones inside iframe!

Demo page

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").attr('src','iframe.html').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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100