jquery droppable iframe offset

Question

Я пытаюсь использовать нокаут для привязки html к iframe.

На главной странице содержится перетаскиваемая и iframe содержит droppable. Проблема заключается в том, что предмет падает не в том месте, например:

Зеленый цвет, где мне бы хотелось, чтобы капля произошла, но красный цвет - это место, где происходит падение, похоже, находится справа координаты, но не принимая во внимание положение iframes на главной странице.

Я попытался применением iframefix к обеим перетаскиваемым и Droppable однако это не помогло:

iframe.find('.sim-row').droppable({ 
     iframeFix: true, 
     drop: function (event, ui) { 
      console.log("dropped"); 
     } 
}); 

$('#drag').draggable({ 
    iframeFix: true, 
    helper: "clone" 
}); 

Это было интересно, есть ли какое-то образом о создании «смещением» на основе позиции IFrames и передать это через перетаскиваемый, чтобы он мог вычислить свою позицию?

Некоторые фидель: Главная страница - http://jsfiddle.net/D26CQ/1/

IFRAME - http://jsfiddle.net/cMfMq/

Answer 1

Самое простое решение, которое я смог найти, чтобы изменить перетаскиваемую функцию jqueryUI учитывать смещение:

в $ .ui.ddmanager добавить следующие строки:

 m[i].offset.top -= m[i].element.parents().find("html,body").scrollTop(); 
     m[i].offset.left -= m[i].element.parents().find("html,body").scrollLeft(); 

     // iframe positioning 
     if (this.current.options.iframeOffset) { 
      m[i].offset.top += this.current.options.iframeOffset.top; 
      m[i].offset.left += this.current.options.iframeOffset.left; 
     } 

просто будьте передняя:

 m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight }; 

Answer 2

У меня была аналогичная проблема при использовании IFRAME в начальной загрузки, я установил ее путем модификации Droppable класс пикап IFRAME и сохранить ссылку на него и обновленные функции пересекаются, чтобы обнаружить, когда перетаскиваемым является над iframe и отрегулирует пересечение в соответствии с прокруткой и смещением iframe.

Демо здесь: https://dl.dropboxusercontent.com/u/10953135/droppable/index.html

Проверено на: Chrome, Firefox и IE10

Пожалуйста, смотрите следующие мои изменения.

Commit

https://github.com/Azerothian/jquery-ui/commit/57456ff345fbd119b63524df2e2ede72502dcf9a

Diff

@@ -53,7 +53,20 @@ $.widget("ui.droppable", { 

     this.isover = false; 
     this.isout = true; 
- 
+  if(o.iframeFix) 
+  { 
+   windowTest = this.window.length && this.window.length > 0 ? this.window[0] : this.window; 
+   if(windowTest !== undefined && windowTest !== null) 
+   { 
+    this.iframe = windowTest.frameElement 
+    if(this.iframe === undefined || this.iframe === null) 
+    { 
+     throw "[Droppable] You are specifing iframe fix for a object that does not exist inside a iframe"; 
+    } 
+   } else { 
+    throw "[IframeFix] Window is not defined.. lets blow up because we are unable to find the iframe."; 
+   } 
+  } 
     this.accept = $.isFunction(accept) ? accept : function(d) { 
      return d.is(accept); 
     }; 
@@ -244,6 +257,25 @@ $.ui.intersect = (function() { 
      t = droppable.offset.top, 
      r = l + droppable.proportions().width, 
      b = t + droppable.proportions().height; 
+ 
+  if (droppable.options.iframeFix) 
+  { 
+  var iframeOffset = $(droppable.iframe).offset(), 
+    iframeWidth = $(droppable.iframe).width(), 
+    iframeHeight = $(droppable.iframe).height(), 
+    iframeScrollTop = $(droppable.iframe).contents().scrollTop(), 
+    iframeScrollLeft = $(droppable.iframe).contents().scrollLeft(); 
+   
+   if (y1 < iframeOffset.top || x1 < iframeOffset.left || x1 + draggable.helperProportions.width > iframeOffset.left + iframeWidth || y1 + draggable.helperProportions.height > iframeOffset.top + iframeHeight) // outside iframe; 
+   { 
+   return false; 
+   } 
+   l = (iframeOffset.left + droppable.offset.left) - iframeScrollLeft; 
+   r = l + droppable.proportions().width; 
+   t = (iframeOffset.top + droppable.offset.top) - iframeScrollTop; 
+   b = t + droppable.proportions().height; 
+  } 
+ 

     switch (toleranceMode) { 
     case "fit": 

Answer 3

Я не могу комментировать, но .... @ ответ kiwijus работал идеально подходит для нас. Отсутствует одна часть документации, так что вам нужно указать iframeOffset при вызове draggable.

$('.your-draggable-content').draggable({ 
     helper: "clone", 
     iframeFix: true, 
     iframeOffset: $('#your-iframe').offset() 
});