Странное поведение перетаскивания окна

Question

У меня есть модальное окно mootools.
Содержимое окна iFrame.
Я перетаскиваю окно изнутри iFrame. (он сильно затягивается, но сильно трясется во время перетаскивания)

Ссылка для связи here.

Вопрос:

• почему это странное поведение сопротивления?
• iFrame оставляет свою границу, пустую, в месте происхождения. Как этого избежать?

Благодарим за идеи/советы по поиску проблемы.

---

Мой код:

window.addEvent('domready',function() { 
document.getElementById('iframe2_footer').addEventListener('mousedown', mouseDown, false); 
window.addEventListener('mouseup', mouseUp, false);   
}); 

function mouseUp() 
{ 
window.removeEventListener('mousemove', divMove, true); 
} 
function mouseDown(e){ 
var div = parent.document.getElementById("price_info"); 
offY= e.clientY-parseInt(div.offsetTop); 
offX= e.clientX-parseInt(div.offsetLeft); 
window.addEventListener('mousemove', divMove, true); 
} 
function divMove(e){ 
var div = parent.document.getElementById("price_info"); 
div.style.position = 'absolute'; 
div.setPosition({ x: e.clientX-offX }); 
div.setPosition({ y: e.clientY-offY }); 
} 

EDIT: Просто сделал некоторые полено в e.clientX и e.clientY (Спасибо @Nils за идею) и получил это:

... 
450 -168 
340 -218 
460 -173 
347 -221 
468 -176 
355 -224 
478 -179 
364 -226 
483 -182 
374 -229 
... 

Довольно большие шаги. Любая идея почему?

Answer 1

Как уже упоминалось, я также не вижу, как это можно решить, по крайней мере, без дополнительного перетаскиваемого элемента блока вне iframe. Возможно, вы слишком сосредоточены на этой конкретной проблеме, поэтому упустили возможность использования простого модального плагина. Этот плагин реализовал эффект перетаскивания, почему бы не использовать его. Если вы открываете простой modal.js файл, в строке 72 является HTML шаблон для плагина, который выглядит как:

"<div class=\"simple-modal-header\"> \ 
    <h1>{_TITLE_}</h1> \ 
    </div> \ 
    <div class=\"simple-modal-body\"> \ 
    <div class=\"contents\">{_CONTENTS_}</div> \ 
    </div> \ 
    <div class=\"simple-modal-footer\"></div>" 

Просто настроить шаблон для ваших предпочтений, так что если вы хотите иметь перемещаемой колонтитул, в отличие от заголовок по умолчанию, попробуйте следующее:

"<div class=\"simple-modal-body\"> \ 
    <div class=\"contents\">{_CONTENTS_}</div> \ 
    </div> \ 
    <div class=\"simple-modal-footer\"></div> \ 
    <div class=\"simple-modal-header\"><h1>{_TITLE_}</h1></div>" 

Нанесите CSS и это все, модальный и перемещаемой IFRAME без лишних осложнений.

EDIT:

Почему это странное поведение сопротивления?

Простой тест, который показывает, где проблема, поместить этот код в drag_test.php и iframe.php:

// script 
window.addEventListener("mousemove", function(e) { 
    document.getElementById('mousepos').innerHTML = e.clientX+' - '+e.clientY; 
}); 
// body 
<p id="mousepos"></p> 

Перемещение мыши вокруг, и вы увидите, что одно окно не знает мыши, когда мышь находится внутри другого окна. Это связано с тем, что в иерархии DOM объект window - объект верхнего уровня.

iFrame оставляет свою границу, пустую, на месте происхождения. Как этого избежать?

Граница, которую вы видите, оставлена ​​от простого модального div. Когда вы устанавливаете position: absolute; в iframe, он отделяет рамку от контейнера, поэтому контейнер остается на исходном месте.

Answer 2

Не знаете, почему вы изобретаете колесо. Вы используете MooTools. Используйте Drag + Drag.Move от MooTools-больше:

http://jsfiddle.net/dimitar/bEdX8/

new Drag.Move(document.getElement('div.container'), { 
    handle: document.getElement('.dragme'), 
    modifiers: { 
     x: 'margin-left', 
     y: 'margin-top' 
    } 
}); 

, кажется, работает без каких-либо сбоев.

также, ваш код очень лаги.

var div = parent.document.getElementById("price_info"); 
div.style.position = 'absolute'; 
div.setPosition({ x: e.clientX-offX }); 
div.setPosition({ y: e.clientY-offY }); 

Это работает на каждом шагу? так что первое, что неправильно: информация о ценах не изменится. кешируйте его. позиция не изменится. установить его и забыть.

вызывается дважды, когда вы можете назвать его однажды:

div.setPosition({ 
    y: e.clientY - offY, 
    x: e.clientX - offX 
}); 

хотя у вас есть элемент - набор div.style.left = nnn; чтобы избежать функциональных вызовов вообще.

И offY и offX - глобальные переменные (плохие), и каждая ссылка - две цепочки областей вверх ... серьезно, неудивительно, что это лагги. когда вы делаете материал низкого уровня, который должен быть исполнен, javascript нуждается в микро-оптимизации, и вам нужно действительно применить себя.

также, ваш код не работает в IE, и вы вообще не используете apache mootools. элемент ->document.id('someid'), события: element.addEvents({ event1: fn, event2: fn)); и т. д.

mootools не просто возвращает элемент. он также расширяет его в IELT9 и устанавливает элемент uid, storage и т. д.

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

Answer 3

Вы можете попробовать другую стратегию, если вам абсолютно необходимо использовать iframe. В IFRAME:

window.addEvent('mousedown',function(e) { 
    var start={x:e.clientX,y:e.clientY}; 
    window.addEvent('mousemove',function(e) { 
     window.parent.postMessage({dX:start.x-e.clientX, dY:start.y-e.clientY}); 
    }); 
}); 

window.addEvent('mouseup',function(e) { 
    window.removeEvents('mousemove'); 
}); 

В главном окне:

window.onMessage=function(event) { 
// do something with event data 
} 

Он должен работать только в некоторых браузерах, самый последний, конечно. Дайте мне знать, если вам удастся.