Почему мои свойства теряют определение? (ДС) - PullRequest
Новая
       2

Почему мои свойства теряют определение? (ДС)

0 голосов
/ 07 июля 2011

Я создаю перетаскиваемую тяжелую страницу и присваиваю каждому перетаскиваемому элементу свойства defaultTop и defaultLeft, чтобы я мог легко вернуть его в исходное положение.Это было нормально и непривычно, пока внезапно функция сброса не сообщит их значения как неопределенные.Так как я не работал над этими частями, когда они сломались (они работали в течение некоторого времени), я не уверен, где я ошибся.Спасибо за помощь.

Функция, которая создает элемент: 

function makeTool(id, imgURL, defaultL, defaultT,trayname){
var a=document.createElement('img');
a.setAttribute('src', imgURL);
a.setAttribute('id',id);
a.setAttribute('class','drag');
a.intray=true;
a.tray=trayname;
a.rotation=0;
a.style.zIndex=document.getElementById(trayname).style.zIndex+1;
document.getElementById(trayname).appendChild(a);
a.defaultTop=ExtractNumber(document.getElementById(trayname).style.top)+defaultT;
a.defaultLeft=ExtractNumber(document.getElementById(trayname).style.left)+defaultL;
a.style.top=a.defaultTop+'px';
a.style.left =a.defaultLeft+'px';
a.addEventListener('touchstart', function(e) { return self.touchStart(e) }, false);
a.addEventListener('gesturestart', function(e) { return self.gestureStart(e) }, false);
a.addEventListener('touchmove', function(e) { return self.touchMove(e) }, false);
a.addEventListener('touchend', function(e) { return self.touchEnd(e) }, false);
tools.push(a);
return a;
}

и функция сброса: 

function reposition(t){
    console.log(t+' top: '+document.getElementById(t).defaultTop);
    document.getElementById(t).style.left=document.getElementById(t).defaultLeft+'px';
    document.getElementById(t).style.top=document.getElementById(t).defaultTop+'px';
}

, где я получаюжурнал undefined

1 Ответ

2 голосов
/ 23 сентября 2012

Я не уверен, помогает ли Тар, но у меня была похожая проблема.

Я писал объект для вычисления ширины моих DIV в соответствии с моим innerWidth: 

function ScreenGrid() {
'use strict';

this.ColumnIDs = new Array();
this.Widths = new Array();
this.Dynamic = true;
this.Set = adjust;

var ColumnIDsPersist;
var WidthsPersist;

function adjust() {

    //stuff

    for (var i = 0; i < ColumnIDsPersist.length; i++) {

Функция настройки - это то, где происходит волшебство. Чтобы гарантировать, что DIV будут оставаться на экране, я использовал следующий код: 

if (window.addEventListener) {
            // Good browsers.
            window.addEventListener('resize', react, false);
        }
        else if (w.attachEvent) {
            // Legacy IE support.
            window.attachEvent('onresize', react);
        }
        else {
            // Old-school fallback.
            window.onresize = react;
        }

И это функция реагирования: 

    // Slight delay.
function react() {

    // Clear the timer as window resize fires,
    // so that it only calls adapt() when the
    // user has finished resizing the window.
    clearTimeout(timer);

    // Start the timer countdown.
    timer = setTimeout(adjust, 16);
    // -----------------------^^
    // Note: 15.6 milliseconds is lowest "safe"
    // duration for setTimeout and setInterval.
    //
    // http://www.nczonline.net/blog/2011/12/14/timer-resolution-in-browsers
}

Проблема заключалась в том, что каждый раз, когда срабатывает REACT, o не определено в этом. После большого количества исследований я заметил, что когда я запускал ADJUST из SET (), объект THIS был моим SCREENGRID, но когда я запускал из REACT, он становился WINDOW, поэтому я не определился в this.ColumnIDs.

Я решил с этим кодом: 

function ScreenGrid() {
'use strict';

this.ColumnIDs = new Array();
this.Widths = new Array();
this.Dynamic = true;
this.Set = adjust;

var ColumnIDsPersist;
var WidthsPersist;

function adjust() {

    // This clearTimeout is for IE.
    // Really it belongs in react(),
    // but doesn't do any harm here.
    clearTimeout(timer);

    // Parse browser width.
    var _width = window.innerWidth || window.document.documentElement.clientWidth || window.document.body.clientWidth || 0;
    var _heigth = window.innerHeight || window.document.documentElement.clientHeight || window.document.body.clientHeight || 0;
    var _usedWidth = 0;
    var _fluidColumn = null;


    //Ao chamar a função adjust novamente no evento on resize, o objeto THIS deixa de ser a função e passa a ser a janela,
    //Essas vareáveis garantem a persistencia dos dados a serem utilizados.
    ColumnIDsPersist = (typeof ColumnIDsPersist == 'undefined') ? this.ColumnIDs : ColumnIDsPersist;
    WidthsPersist = (typeof WidthsPersist == 'undefined') ? this.Widths : WidthsPersist;

    for (var i = 0; i < ColumnIDsPersist.length; i++) {

Ну вот и все, надеюсь, это поможет!

...