iframe内でドラッグ可能なJqueryのスクロールを有効にする

Question

iframe内でjqueryをドラッグ可能にするにはどうすればよいですか？ scroll：trueが動作していないか、または中マウスのスクロールを使用しているときにiframeFixが機能していますが、左クリックを使用して完全に動作していない場合、

$(".draggables .item-container .item").draggable({ 
    revert: "invalid", 
    containment: "#selection", 
    helper: "clone", 
    iframeFix: true, 
    scroll: true, 
    scrollSensitivity: 100, 
    scrollSpeed: 100, 
    cursor: "move", 
}); 

$(".droppables .item-container .item").droppable({ 
    accept: ".draggables .item-container .item", 
    classes: { 
     "ui-droppable-active": "ui-state-active", 
     "ui-droppable-hover": "ui-state-hover" 
    }, 
    drop: function(event, ui) { 
     insertItem(this, ui.draggable); 
    } 
}); 

<div style="height: 178px; border: 1px solid #000;"></div> <iframe src="index.html?formForward=LOAD&amp;t_mm=02&amp;t_dd=27&amp;t_hh=12&amp;t_min=01" onload="resizeIframe(this);parent.scroll(0,0);" height="2000" style="border-width: 0px; height: 2000px;" width="100%" scrolling="auto"> 
</iframe><div style="height: 1000px; border: 1px solid #000;"> 

Answer 1

私はそれをこのように解決しました。私はこれがあなたを助けることを望む。

(function ($) { 

    $(function() { 


     $.ui.plugin.add("draggable", "scroll_fix_iframe", { 
      start: function(event, ui, i) { 


       // Solution 
       i.scrollParentNotHidden[ 0 ] = document.documentElement; 
       i.overflowOffset = $(ui.helper).offset(); 

       /* 
       if (!i.scrollParentNotHidden) { 
        i.scrollParentNotHidden = i.helper.scrollParent(false); 
       } 

       if (i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] && 
         i.scrollParentNotHidden[ 0 ].tagName !== "HTML") { 
        i.overflowOffset = i.scrollParentNotHidden.offset(); 
       } 
       */ 

      }, 
      drag: function(event, ui, i ) { 

       var o = i.options, 
        scrolled = false, 
        scrollParent = i.scrollParentNotHidden[ 0 ], 
        document = i.document[ 0 ]; 

       if (scrollParent !== document && scrollParent.tagName !== "HTML") { 
        if (!o.axis || o.axis !== "x") { 
         if ((i.overflowOffset.top + scrollParent.offsetHeight) - event.pageY < 
           o.scrollSensitivity) { 
          scrollParent.scrollTop = scrolled = scrollParent.scrollTop + o.scrollSpeed; 
         } else if (event.pageY - i.overflowOffset.top < o.scrollSensitivity) { 
          scrollParent.scrollTop = scrolled = scrollParent.scrollTop - o.scrollSpeed; 
         } 
        } 

        if (!o.axis || o.axis !== "y") { 
         if ((i.overflowOffset.left + scrollParent.offsetWidth) - event.pageX < 
           o.scrollSensitivity) { 
          scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft + o.scrollSpeed; 
         } else if (event.pageX - i.overflowOffset.left < o.scrollSensitivity) { 
          scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft - o.scrollSpeed; 
         } 
        } 

       } else { 

        if (!o.axis || o.axis !== "x") { 
         if (event.pageY - $(document).scrollTop() < o.scrollSensitivity) { 
          scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed); 
         } else if ($(window).height() - (event.pageY - $(document).scrollTop()) < 
           o.scrollSensitivity) { 
          scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed); 
         } 
        } 

        if (!o.axis || o.axis !== "y") { 
         if (event.pageX - $(document).scrollLeft() < o.scrollSensitivity) { 
          scrolled = $(document).scrollLeft(
           $(document).scrollLeft() - o.scrollSpeed 
          ); 
         } else if ($(window).width() - (event.pageX - $(document).scrollLeft()) < 
           o.scrollSensitivity) { 
          scrolled = $(document).scrollLeft(
           $(document).scrollLeft() + o.scrollSpeed 
          ); 
         } 
        } 

       } 

       if (scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) { 
        $.ui.ddmanager.prepareOffsets(i, event); 
       } 

      } 
     });   


     $("#drag").draggable({ 

      scroll_fix_iframe:true, 

      start: function(){}, 
      stop: function() {}, 
      drag: function(event,ui){} 

     }); 

    }); 

})(jQuery);