jQuery的工作時，李是在頂部，而不是當它在底部

Question

我設計了一個程序。有了它，我可以在我的頁面上移動li標籤。

代碼：

var click = 0; 
 
var pos_x = 0; 
 
var pos_y = 0; 
 
var a = 0; 
 
var out = [0, 0, 0, 0]; 
 

 
$(".movenode").mousedown(function() { 
 
\t \t \t \t a = $(this).attr("id"); 
 
     var b = $(this).position(); 
 
     if(click == 0) 
 
     { 
 
     \t  pos_x = b.left; 
 
      pox_y = b.top; 
 
     } 
 
     click = 1; 
 
     
 
     $(document).mousemove(function(e) { 
 
     if(click==1) { 
 
      $("#"+a).css({left:e.pageX-b.left-40, top:e.pageY-b.top-10}); 
 
     } 
 
    }); 
 
    
 
}); 
 

 
$(document).mouseup(function(e) { 
 
    $("#"+a).css({left:pos_x, top:pos_y}); 
 
    var d = 1; 
 
    while(d < 5) { 
 
     var pos = $("#"+d).position(); 
 
     if(e.pageY > pos.top && e.pageY < pos.top + $("#"+d).height() && e.pageX > pos.left && e.pageX < pos.left + $("#"+d).width()) { 
 
    \t  alert($("#"+d).attr("id")); 
 
     } 
 
     d++; 
 
    } 
 

 
    click = 0; 
 
});

.movenode { 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="movenode" id="1"/>1234 
 
<li class="movenode" id="2"/>sadsdsadsad 
 
<li class="movenode" id="3"/>sadsdsadsad 
 
<li class="movenode" id="4"/>sadsdsadsad

此代碼的工作。但我有一個小問題。當我在此爲了這個代碼添加到我的HTML文件，並設置元素：

1. HTML（僅此4 LI）
2. LOAD CSS爲HTML
3. 加載JS到html

這個程序的工作原理，但是當我設置順序此元素：

1. 加載CSS的HTML
2. 個加載JS到html
3. HTML（這4 LI）

這一計劃doeasn't工作。我不能動這個李。事實上，JS的工作原理是讓我看到警報，但我仍然無法移動此李。 我不能讓我們頭，身體等，因爲它不工作。 我該怎麼做才能修復這個bug？

Answer 1

嘗試添加$(document).ready(function(){ //code });

var click = 0; 
 
var pos_x = 0; 
 
var pos_y = 0; 
 
var a = 0; 
 
var out = [0, 0, 0, 0]; 
 
$(document).ready(function(){ 
 
$(".movenode").mousedown(function() { 
 
\t \t \t \t a = $(this).attr("id"); 
 
     var b = $(this).position(); 
 
     if(click == 0) 
 
     { 
 
     \t \t pos_x = b.left; 
 
     \t \t pox_y = b.top; 
 
     } 
 
     click = 1; 
 
     
 
     $(document).mousemove(function(e) 
 
     { 
 
      if(click==1) 
 
      { 
 
      $("#"+a).css({left:e.pageX-b.left-40, top:e.pageY-b.top-10}); 
 
      } 
 
    \t }); 
 
    
 
}); 
 

 
$(document).mouseup(function(e) { 
 
    $("#"+a).css({left:pos_x, top:pos_y}); 
 
\t var d = 1; 
 
while(d < 5) 
 
{ 
 
    \t var pos = $("#"+d).position(); 
 

 
\t \t if(e.pageY > pos.top && e.pageY < pos.top + $("#"+d).height() && e.pageX > pos.left && e.pageX < pos.left + $("#"+d).width()) 
 
    { 
 
    \t \t \t \t alert($("#"+d).attr("id")); 
 
    } 
 
    d++; 
 
} 
 

 
\t \t \t 
 
    \t click = 0; 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="movenode" id="1"/>1234 
 
<li class="movenode" id="2"/>sadsdsadsad 
 
<li class="movenode" id="3"/>sadsdsadsad 
 
<li class="movenode" id="4"/>sadsdsadsad