데이터베이스에 positon을 저장하기 위해 jquery에서 드래그 가능한 div를 선택해야합니다.

마우스를 사용하여 div를 배치 한 다음 PHP를 사용하여 데이터베이스에 positon 데이터를 저장할 수있는 페이지를 만들려고합니다. 한 번에 여러 div를 이동하고 위치를 저장할 수 있기를 원합니다.데이터베이스에 positon을 저장하기 위해 jquery에서 드래그 가능한 div를 선택해야합니다.

내 문제는 jquery입니다. 코드를 사용하면 여러 div의 정보를 아래 코드에 표시된 순서대로 선택하여 선택, 이동 및 저장할 수 있습니다. 그것들을 하나씩 움직이면 잘 작동합니다.

JQuery와 코드 :

<script type="text/javascript"> 
$(function() { 

    $("#1").multidraggable(); 
           $("#1").mousedown(function(){ 
           pos1 = '1'; 
           }); 

    $("#2").multidraggable(); 
           $("#2").mousedown(function(){ 
           pos2 = '2'; 
           }); 

    $("#3").multidraggable(); 
           $("#3").mousedown(function(){ 
           pos3 = '3'; 
           }); 

    $("#4").multidraggable(); 
           $("#4").mousedown(function(){ 
           pos4 = '4'; 
           }); 

    $("#5").multidraggable(); 
           $("#5").mousedown(function(){ 
           pos5 = '5'; 
           }); 

    $("#6").multidraggable(); 
           $("#6").mousedown(function(){ 
           pos6 = '6'; 
           }); 

      $(".element").mouseup(function(){ 
        var coord1 = $('#1').position(); 
        var url1 = "updatecoords.php?x=" + coord1.left + "&y=" + coord1.top + "&id=" + pos1 + ""; 
        $('#result1').load(url1, function() { 
        }); 
        var coord2 = $('#2').position(); 
        var url2 = "updatecoords.php?x=" + coord2.left + "&y=" + coord2.top + "&id=" + pos2 + ""; 
        $('#result2').load(url2, function() { 
        }); 
        var coord3 = $('#3').position(); 
        var url3 = "updatecoords.php?x=" + coord3.left + "&y=" + coord3.top + "&id=" + pos3 + ""; 
        $('#result3').load(url3, function() { 
        }); 
        var coord4 = $('#4').position(); 
        var url4 = "updatecoords.php?x=" + coord4.left + "&y=" + coord4.top + "&id=" + pos4 + ""; 
        $('#result4').load(url4, function() { 
        }); 
        var coord5 = $('#5').position(); 
        var url5 = "updatecoords.php?x=" + coord5.left + "&y=" + coord5.top + "&id=" + pos5 + ""; 
        $('#result5').load(url5, function() { 
        }); 
        var coord6 = $('#6').position(); 
        var url6 = "updatecoords.php?x=" + coord6.left + "&y=" + coord6.top + "&id=" + pos6 + ""; 
        $('#result6').load(url6, function() { 
        }); 
    }); 

}); 
</script>

나는 위대한 작품을 jQuery 라이브러리의 multidraggable를 사용합니다. 내 문제는 내가 코드를 어떻게 구성했는지 이해하지만 어떻게해야하는지 알 수 없다.

미리 감사드립니다. 에밀

출처

2011-10-07 Emil Johansson