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