The divs of jQueryUIresizble and draggable contain iframe, which leads to non-smooth scaling and drag-and-drop Solutions.

Preface not only does jQueryUIresizble div contain iframe, but also draggable contains iframe, which may lead to smooth drag and drop. However, jQueryUI handles draggable & mdash; & mdash; added the iframeFix attribute setting (when iframe: true, the preface is not only that if the div of jQuery UI resizble contains iframe, it will lead to non-smooth scaling, draggable will also contain iframe, which will lead to smooth drag and drop, but because jQuery UI handles draggable-added the iframeFix attribute setting (which can be solved when iframe: true ), but I didn't add this attribute for resizable (it's hard to understand, it's gross ). Problem: The jQuery UI resizble div contains iframe, which causes the scaling to be not smooth (the scaling is not smooth through helper). Test code: HTML: CSS: # draggable {width: 800px; height: 500px;} iframe {width: 100%; height: 100% ;}. widget_resizable_helper {border: 3px solid # A29B9B; z-index: 999999! Important;} JS: $ ("# draggable "). resizable ({helper: "widget_resizable_helper"}); solution 1: add the z-index attribute to iframe when scaling (triggering the resizable start event, place iframe at the bottom layer. $ ("# Draggable "). resizable ({helper: "widget_resizable_helper", start: function (event, ui) {$ ("# draggable" ).css ({position: "relative", "z-index ": -1}); $ ("iframe" ).css ({position: "relative", "z-index":-2});}, stop: function () {$ ("# draggable" ).css ({position: "absolute", "z-index": 1000}); // Dust Collection, earth collection, set the attribute $ ("iframe" ).css ({"z-index": 1001}) ;}} in the normal state. This method is valid in chrome and firefox, but it is invalid in IE (scaling to the iframe still takes a card and a card. It hurts ). Cause: careful people may find that setting z-index is effective, but why is it useless. The murderer is IE penetration. The specific reason is: in IE, if the two divs have a cascade relationship, the upper-layer divs have no content and background image. When the mouse overlaps the two divs, this will trigger the lower-layer div mouseover event (IE) and trigger the mouseleave event of the Upper-layer div. That is to say, the upper-layer div is penetrated. So the example appears on IE: some elements are blocked (z-index takes effect), but the tag can be triggered by IE penetration, therefore, when resizing is performed, the label in iframe is triggered, and the card is stuck. Result: this solution is not a big problem. Train of Thought 2: I suddenly realized that draggable had solved the problem of iframe impact, so I could not learn from the iframefix in draggable. $ ("# Draggable "). resizable ({helper: "widget_resizable_helper", start: function (event, ui) {$ ("iframe "). each (function () {$ (""). css ({width: this. offsetWidth + "px", height: this. offsetHeight + "px", position: "absolute", opacity: "0.001", zIndex: 1000 }). css ($ (this ). offset ()). appendTo ("body") ;}) ;}, stop: function () {$ ("div. ui-resizable-iframeFix "). each (function () {this. parentNode. removeChild (t His);}) ;}}); Result: the solution is magical. chrome, firefox, and IE are all very smooth, so it can attack the jade. The solution is not here, and you will understand it. There are still problems-draggable as I mentioned above, jQuery UI's solutions to draggable iframefix are as follows. $ ("Iframe "). each (function () {$ (""). css ({width: this. offsetWidth + "px", height: this. offsetHeight + "px", position: "absolute", opacity: "0.001", zIndex: 1000 }). css ($ (this ). offset ()). appendTo ("body") ;}); this is a big problem with draggable-drag will still be stuck, and it is very obvious. The reason is. css ($ (this ). offset () and width: this. offsetWidth + "px", height: this. offsetHeight + "px", the size and position of the occlusion layer are only the size and position of the original iframe. If you drag the iframe and exit the occlusion layer, it is obvious that the block is stuck. Because the block layer is not blocked, iframefix is useless !!!!! Hahaha, do you think it is difficult. However, there are several solutions: Train of Thought 1: Use helper. When helper moves to the specified location, set the iframe location. $ WidgetObj. draggable ({helper: function () {return '';}, iframeFix: true, stop: function (event, ui) {incluwidgetobj.css ({'top': ui. position. top, 'left': ui. position. left}) ;}}); Train of Thought 2: Disable iframeFix. Set the occlusion layer to the length and width of the body, and set the position to top: 0; left: 0, $ ("# draggable "). draggable ({start: function (event, ui) {$ ("iframe "). each (function () {$ (""). css ({width: document. body. scrollWidth + "px", height: document. body. scrollHeight + "px", position: "absolute", opacity: "0.001", zIndex: 1000, top: 0, left: 0 }). appendTo ("body") ;}) ;}, stop: function () {$ ("div. ui-draggable-iframeFix "). each (function () {this. paren TNode. removeChild (this) ;};}}); I prefer the first method in two ways. The effect is better than the second method. Although the second method won't be stuck, there are situations where all pages are selected.