javascript - Jquery 在 li 在顶部时工作，而不是在底部时工作

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() {
				a = $(this).attr("id");
        var b = $(this).position();
        if(click == 0)
        {
       	    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()) {
   	    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 里)
2. 加载 CSS 到 html
3. 加载 JS 到 html

这个程序可以工作，但是当我按照这个顺序设置这些元素时:

1. 加载css到html
2. 加载js到html
3. HTML(这 4 里)

这个程序不工作。我不能移动这个li。事实上，JS 工作是因为向我显示警报，但我仍然无法移动这个 li。我不能使用头部、 body 等，因为它不起作用。我应该怎么做才能修复这个错误？

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() {
				a = $(this).attr("id");
        var b = $(this).position();
        if(click == 0)
        {
       		 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())
    {
   	 			alert($("#"+d).attr("id"));
    }
    d++;
}

			
    	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