$（window）.loadが常に動作しない

Question

jqueryを使用して自分のサイトにドラッグ＆ドロップを実装しようとしています。これは、Google Chromeブラウザの下でこれをテストすると、ほとんどの場合その作業（10回の作業のうち9回）です。私はIE11を使用するときにほとんどの時間は働いていない（例えば、10回のうち1回は働いている）。

私はこれをSharePoint 2013サイトで実装しようとしています。

私は次のコードを使用してい

：

$(window).load(function() { 
     $('.draggable').draggable({ 
      cursor: "move", 
      revert: "invalid", 
      opacity: 0.7, 
      snap: ".droppable", 
      snapMode: "inner" 
     }); 
    }); 

    // Dropzone 
    $(window).load(function() { 
     $('.droppable').droppable({ 
      accept: ".draggable", 
      hoverClass: 'hovered', 
      drop: positioning 
     }); 
    }); 

    function positioning(event, ui) { 
     var draggableId = ui.draggable.attr("id"); 
     var droppableId = $(this).attr("id"); 
     updateItemSprintBacklog(droppableId, draggableId); 
     window.location = window.location; 
    } 

    $(window).load(function() { 
     $('.droppableDelete').droppable({ 
      accept: ".draggable", 
      hoverClass: 'hovered', 
      drop: deleteTicket 
     }); 
    }); 

を私はwindow.loadが時々遅くするためにロードされていると信じて、しかし、私は、なぜ言うことができません。そして私はこれを解決する方法を知らない。

ありがとうございました。

Answer 1

ご回答いただきありがとうございます。 私は答えがあると思う。 私は500msのTimeOutを設定しました。今はいつも動く。すべての

setTimeout(function(){ 
     // Code 
    }, 500); 

Answer 2

@Velimir Tchatchevskyは、あなたがそれを行うことができますので$(window).loadが書き込みを複数回である必要はありません、言ったように：

<script type="text/javascript"> 

$(window).load(function() { 
    $('.draggable').draggable({ 
     cursor: "move", 
     revert: "invalid", 
     opacity: 0.7, 
     snap: ".droppable", 
     snapMode: "inner" 
    }); 

    // Dropzone 
    $('.droppable').droppable({ 
     accept: ".draggable", 
     hoverClass: 'hovered', 
     drop: positioning 
    }); 

    $('.droppableDelete').droppable({ 
     accept: ".draggable", 
     hoverClass: 'hovered', 
     drop: deleteTicket 
    }); 
}); 

function positioning(event, ui) { 
    var draggableId = ui.draggable.attr("id"); 
    var droppableId = $(this).attr("id"); 
    updateItemSprintBacklog(droppableId, draggableId); 
    window.location = window.location; 
} 

</script> 

そして、あなたもこのように、 JQuery Document Readyを使用することができます。

<script type="text/javascript"> 

$(function() { 
    $('.draggable').draggable({ 
     cursor: "move", 
     revert: "invalid", 
     opacity: 0.7, 
     snap: ".droppable", 
     snapMode: "inner" 
    }); 

    // Dropzone 
    $('.droppable').droppable({ 
     accept: ".draggable", 
     hoverClass: 'hovered', 
     drop: positioning 
    }); 

    $('.droppableDelete').droppable({ 
     accept: ".draggable", 
     hoverClass: 'hovered', 
     drop: deleteTicket 
    }); 
}); 

function positioning(event, ui) { 
    var draggableId = ui.draggable.attr("id"); 
    var droppableId = $(this).attr("id"); 
    updateItemSprintBacklog(droppableId, draggableId); 
    window.location = window.location; 
} 

</script> 

Answer 3

毎回動作しないのは、SharePointに読み込むスクリプトファイルがたくさんあり、jQueryファイルをどこに置くかによってサイトが読み込まれる前にロードされないことがあるからです。

だからではなく、このようなjQuerysのJavaScriptの負荷を使用しようとすることができます：

window.onload = function() { 
    //your code 
}; 

それとも、jqueryのファイルがロードされているかどうかを確認する必要がjQueryのは、次のようにロードされているかどうかを確認する再帰関数を聖霊降臨祭：

(function checkForJquery() { 
    if (window.jQuery) { 
     // jQuery is loaded 
     // your code here 
    } else { 
     // jQuery is not loaded 
     checkForJquery(); 
    } 
})(); 

希望します。