2014-01-09 3 views
2

Я испытываю проблемы, имея перетаскиваемый div внутри (прокрученного) iframe. Пожалуйста, посмотрите на эту скрипку: http://jsfiddle.net/CqE43/jQueryUI перетаскиваемый элемент внутри iframe - плохое поведение с прокрученными iframes

Это используется код:

$('#test').contents().find('body').append('<div id="wrapper" style="width: 300px; height: 900px; background: #ff0000; display: block; margin-top:50px;"><div id="drag" style="width: 100px; height: 100px; background-color: blue;" ></div></div>'); 
$('#test').contents().find('#drag').draggable({ 
iframeFix: true, 
start: function(event, ui) { 
    console.log('start'); 
}, 
drag: function(event, ui) { 
    console.log('drag'); 
}, 
stop: function(event, ui) { 
    console.log('stop'); 
} 
}); 

странное поведение: если IFrame является не прокручивать все работает, как ожидалось, но если один прокручивает IFrame НЕМНОГО , при перетаскивании появляется смещение.

+0

Еще одна странная вещь: я не получаю метод остановки, когда я закончил с перетаскиванием – sachinjain024

+0

Еще один: я не могу перетащить, когда полоса прокрутки перемещена вправо .. (может быть связано с предыдущим) – sachinjain024

+0

jep, то же самое для меня ... но, возможно, это имеет какое-то отношение к jsfiddle. Но я уверен, что другое поведение, о котором я говорю, происходит и в других случаях использования. – johannesboyne

ответ

0

Хорошо, у меня есть (а не а) решение.

Вот скрипка: http://jsfiddle.net/CqE43/17/

и это исходный код:

$(function() { 
    $('#test').contents().find('body').append('<div id="wrapper" style="width: 300px; height: 900px; background: #ff0000; display: block; margin-top:50px;"><div id="drag" style="width: 100px; height: 100px; background-color: blue;" ></div></div>'); 
    var myDraggable = $('#test').contents().find('#drag').draggable({iframeFix: true}).data('ui-draggable'); 
    myDraggable._mouseDrag = function(event, noPropagation) { 
     if (this.offsetParentCssPosition === "fixed") { 
      this.offset.parent = this._getParentOffset(); 
     } 
     //Compute the helpers position 
     this.position = this._generatePosition(event); 
     this.positionAbs = this._convertPositionTo("absolute");  

     //Call plugins and callbacks and use the resulting position if something is returned 
     if (!noPropagation) { 
      var ui = this._uiHash(); 
      if(this._trigger("drag", event, ui) === false) { 
       this._mouseUp({}); 
       return false; 
      } 
      this.position = ui.position; 
     } 
     if(!this.options.axis || this.options.axis !== "y") { 
      this.helper[0].style.left = this.position.left+"px"; 
     } 
     if(!this.options.axis || this.options.axis !== "x") { 
      this.helper[0].style.top = $('#test').contents().find('body').scrollTop()+this.position.top+"px"; 
     } 
     if($.ui.ddmanager) { 
      $.ui.ddmanager.drag(this, event); 
     } 
     return false; 
    } 
}); 

Да, это не красиво УБТ он работает очень хорошо!

Смежные вопросы