0

i've designed a program. With it i can move li tags on my page.

Code:

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

This code works. But i have a little problem. When i add this code to my html file and set the elements in this order:

  1. HTML (just this 4 li)
  2. LOAD CSS TO html
  3. Load JS to html

This program works, but when I set this elements in this order:

  1. Load css to html
  2. Load js to html
  3. HTML (this 4 li)

this program doeasn't work. I cannot move this li. In fact, JS works because shows me alerts, but still i cannot move this li. I cannot us head, body etc. because its not working. What should i do to repair this bug?

J-Alex
  • 6,881
  • 10
  • 46
  • 64
Warmix
  • 217
  • 8
  • 15
  • This is like loading HTML dynamically. You have to use the .on() function of jQuery like here https://stackoverflow.com/questions/13107715/binding-jquery-to-dynamically-loaded-content – Gerard May 30 '17 at 19:41
  • first of all your should be careful to load js code before close body tag and ,then you should wrap all js code in $(document).ready() function – Mhd Wael Jazmati May 30 '17 at 19:43
  • when you work with the DOM like this, in javascript or jQuery, the html elements must exist for the browser, if this js code is placed before, the html elements are not parsed yet, and selection fails. You must either place it after (usually right after the elements, or at the very end of the body), or use `$(document).ready` by the way your code causes strange displays here (firefox) – Kaddath May 30 '17 at 19:51
  • note: your li tags are not closed, and have no ul, poor of them – Kaddath May 30 '17 at 19:54
  • Oh, ok guys, thanks vary much, working now :) – Warmix May 30 '17 at 19:55

1 Answers1

1

try adding $(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
Jayakrishnan
  • 1,295
  • 2
  • 13
  • 27