2011-07-07 8 views
0

私はドラッグ&ドロップの重いページを作成し、ドラッグ可能な各要素にdefaultTopdefaultLeftのプロパティを与えて、元の位置に簡単にリセットできます。突然、リセット機能はそれらの値を未定義として報告するまで、これはうまくいかなかった。彼らが壊れたときに私はこれらの作品に取り組んでいなかったので(彼らはしばらくの間働いていました)私はどこが間違っているのか分かりません。助けてくれてありがとう。プロパティが定義を失うのはなぜですか? (JS)

要素がある作成機能:

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

+0

ただの関心事:あなたは何故最初から何かを書いていますか? JQueryのようなライブラリを使用して、すべての面倒な作業をしてみませんか? – mydoghasworms

+0

は、私が行くように、私が学んでいます、そして、それはそう –

+0

かもしれないとして、それは時間の節約の限りではありませんので、私は、しばらくの間でのjQueryを使用していない主な理由は、あなたは、 'どこ'はconsole.log(a.defaultTop)しようとしています'a.defaultTop'が定義されていますか?最初から 'undefined'が割り当てられていますか? makeTool関数ログに – Tony

答えて

2

のログを取得していますところでありますtharが役立つかどうかは分かりませんが、同様の問題がありました。

私はinnerWidthに応じて私のdiv要素のデ幅を計算するためのオブジェクトを書いていた:

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++) { 

デ魔法がhappendsどこ調整機能があります。

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; 
     } 

そして、これが反応する機能です::div要素は、私は、次のコードを使用し、画面にフィットし続けることを確実にするに

// 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 
} 

問題は、すべての時間でした火災を反応させ、O未定義ですこの列のIDです。たくさんの調査の後、私はSET()からADJUSTを発射したときにオブジェクトが私の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++) { 

まあ、それは私はそれが役に立てば幸い、これです!

関連する問題