当li位于顶部时，Jquery工作，而不是在底部

Question

我设计了一个程序。有了它，我可以在我的页面上移动li标签。

代码：

＆＃13;

＆＃13;

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

＆＃13;

.movenode {
    position:relative;
}

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

此代码有效。但我有一点问题。当我将此代码添加到我的html文件并按此顺序设置元素时：

1. HTML（仅此4 li）
2. 加载CSS to html
3. 将JS加载到html

此程序有效，但当我按此顺序设置此元素时：

1. 将css加载到html
2. 将js加载到html
3. HTML（此4 li）

这个程序无法正常工作。我不能动这个李。事实上，JS工作，因为向我显示警报，但我仍然无法移动这个李。 我不能把头，身体等因为它不起作用。 我该怎么做才能修复这个错误？

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