draggable div의 위치를 ​​레일에 저장

Question

div를 드래그 할 수있게 한 후에 div를 놓을 때 컨트롤러에 div 위치를 전달하여 데이터베이스에 저장할 수있게하고 싶습니다.

내 첫 번째 아이디어는 javascript를 통해 업데이트 된 상태로 두 개의 텍스트 필드 (X 및 Y 중 하나)가있는 div 내에 숨겨진 양식이있는 것입니다.

그러나 이것은 약간의 해킹처럼 들리지만 우아한 해결책은 아닙니다. 아무도 전에 이것을 만났습니까?

감사합니다.

Answer 1

나는 또한 텍스트 필드에 위치를 저장하는 말을하려고했다 나쁜 생각이다 : 당신이 jQuery를 사용하는 경우

은이 같은 것을 사용할 수 있습니다. jQuery UI는 드래그 가능하며 쉽게 사용할 수 있습니다. 아래 예제는 요소가 삭제 될 때마다 ajax 요청을 보냅니다.

$('#draggable_element').draggable({ 
    stop: function(event, ui) { 
     $.post("http://example.com/some_action", 
      { top: ui.position["top"], left: ui.position["left"] }, 
      function() { 
       // callback stuff 
      } 
     ); 
    } 
}); 

Answer 2

X 및 Y 값을 백그라운드에서 레일스 응용 프로그램에 게시하는 AJAX 요청을 사용할 수 있습니다. HTML에 포지션을 저장할 필요가 없습니다.

// Include this in an onDrop event handler: 
element = ... // dropped div 
url = "http://example.com/.../save_div_position/"; 
data = $(element).position(); 
success_callback = function(data, textStatus) { 
    // alert that new position is saved 
}; 
$.post(url, data, success_callback, "json");