캘린더 드래그 앤 드롭

이 포럼의 도움을 받아 목록을 재정렬하고 MySQL 데이터베이스를 업데이트 할 수있는 단일 목록에 대한 이해와 작업 드래그 앤 드롭 (JQuery 사용)을 얻었습니다. 간단한 캘린더에서 이것을 확장하고 싶습니다. 두 영역에서 몇 가지 지침을 원합니다 : (a) 드롭 한 후에 항목의 위치를 어떻게 식별 할 수 있습니까? 데이터베이스 값을 통해 초기 위치를 알 수 있습니다. 텍스트 노드의 왼쪽 및 위쪽 위치를 사용하여 DOM에서이 정보를 식별 할 수 있습니다. 그러나 DOM의 요소에 대한 이러한 값을 읽는 것이 가장 좋은 방법일까요? (b) 다중 열의 코드를 어떻게 확장 할 수 있습니까? 항목 삭제 시작 열을 알면 새 시작 날짜를 쉽게 계산할 수 있으므로 데이터베이스를 업데이트하십시오. 올바른 방향으로 나를 가리켜 주시면 감사하겠습니다!캘린더 드래그 앤 드롭

출처

2013-06-02 peter300

나는 & jQuery를 레일에 주간 드래그 앤 드롭 달력을 구축하고 내가 그것을 어떻게했는지입니다 :

나는 TD의 내부에 포함 된 행 TD의 낙하 할 것을, 그리고 드래그 DIV 년대와 매주 테이블이를 드래그 DIV가, 그것을 삭제하면

 <script> 
     $('.droppable').droppable({ 
      accept: ".draggable", 
      drop: function(event,ui) { 
       $.post(ui.draggable.data('update-url'), {date: $(this).data('date'), time: $(this).data('time')}); 
       $(this).effect("highlight", {}, 1500); 
      } 
     }) 
     $('.draggable').draggable() 
     </script>

이 같은 표정 :

<tr> 
<td><h4>12:00pm</h4></td> 
<td class="droppable" data-date="2013-06-30" data-time="12:00pm"></td> 
<td class="droppable" data-date="2013-07-01" data-time="12:00pm"></td> 
<td class="droppable" data-date="2013-07-02" data-time="12:00pm"> 
<div class="draggable" data-id="78" data-update-url="/update_weekly_calendar/78"> 
<a href="/event/78/edit">12:00pm Event</a> 
</div> 
</td> 
<td class="droppable" data-date="2013-07-03" data-time="12:00pm"></td> 
<td class="droppable" data-date="2013-07-04" data-time="12:00pm"></td> 
<td class="droppable" data-date="2013-07-05" data-time="12:00pm"></td> 
<td class="droppable" data-date="2013-07-06" data-time="12:00pm"></td> 
</tr>

나는이와 하단에 스크립트 태그가 거기에서

Started POST "/update_weekly_calendar/78" for 127.0.0.1 at 2013-07-02 13:42:27 -0700 
Processing by CalendarsController#update_weekly as */* 
Parameters: {"date"=>"2013-07-03", "time"=>"9:30am", "id"=>"78"}

내가 이벤트 # 78을 찾는 내 일을하고 날짜를 업데이트하고 & 정지 시작 시간이처럼 보이는 POST를 트리거합니다.

힌트 : 이벤트 "찾기"후 이벤트의 지속 시간을 계산하여 &이 이벤트의 "중지 시간"을 업데이트 할 수 있도록하십시오.

위의 코드의 간단한 버전 (시간 매개 변수가없고 날짜 만)을 사용하여 드래그 월별 달력 &도 수행하므로이를 생략합니다. 바라기를이 질문에 대한 답변입니다.

출처

2013-07-02 20:56:50

캘린더 드래그 앤 드롭

답변

관련 문제