드래그 앤 드롭에 의한 투고 내용, 비동기 삭제.　[jQuery, Rails]

9599 단어 haml 아약스 Rails jQuery

개요

요 전날 옷장 앱 (옷 등을 관리하는 것)을 만들었습니다.
드래그 앤 드롭에서 투고 내용을 삭제하는 기능을 구현했습니다.
해당 개소에 투고 내용을 드롭했을 때에 비동기로 삭제를 하는 것입니다.
비망록도 겸해 투고하므로, 따뜻한 눈으로 받을 수 있으면 다행입니다.

여기가 실제 동영상입니다.

이미지를 왼쪽 하단의 휴지통 아이콘에 드롭했을 때에 이벤트를 발화시켜, 비동기로 삭제하고 있습니다.
이미지가 드래그 되어 있는 동안에 휴지통의 아이콘에 새로운 클래스를 부여해, 애니메이션과 같이 구현하고 있습니다.

흐름

jQuery UI 도입

view에 사용자 지정 데이터 추가

jQuery에 코드 기재
이번은 삭제 기능의 구현이므로, json등 controller의 추가는 필요 없습니다.

1. jQuery UI 도입

Gemfile

gem "jquery-rails"
gem "jquery-ui-rails"

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui

jQuery UI는 jQuery를 기반으로 한 JavaScript 라이브러리이기 때문에 여기 2 개의 gem을 설치하고 application.js에 추가합니다.
bundle install을 잊지 마세요! !

2.view에 사용자 지정 데이터 추가

_item.html.haml

.items
  - items.each do |item|
    .item{"data-item_id":"#{item.id}"}
      .item__image
        = image_tag(item.image.to_s) if item.image?
      .item__name
        = item.name

하나씩 item에 data 속성을 부여합니다. (3행째)
jQuery로 이벤트 발화시에 데이터를 취득할 수 있도록 하기 위해서입니다.

3.jQuery

item_delete.js

$(function(){
  $(document).on("turbolinks:load", function(){
   //itemを動かすようにする ①
    $(".items").sortable({
    });
    // itemがドロップされた時にイベント発火　②
    $(".trash-box").droppable({
      accept: ".item",
      activeClass: "move-trash",
      drop: function(e, ui){
        e.preventDefault();
        var delete_message = confirm("削除してもよろしいですか？");
        if(delete_message == true){
          //ドロップされたitem要素を取得。jQueryオブジェクトからDOM要素を取り出す
          var delete_item = ui.draggable[0];　③
          //idを取得。
          var delete_ID = ui.draggable.data("item_id");④
          var delete_url = "/items/" + delete_ID;
          $.ajax({ ⑤
            url: delete_url,
            type: "POST",
            data: {id: delete_ID, "_method": "DELETE"},
            dataType: "json"
          })
          .done(function(data){　⑥
            delete_item.remove();
            location.reload();
          })
          .fail(function(){
            alert("エラー");
          })
        }
      }
    })
  });
});

순서를 따라 설명합니다.

① 각 item을 움직일 수 있도록 합니다.draggable 하지만 좋지만 무작위로 움직여 버리기 때문에 요소를 재정렬 sortable 쪽이 움직임이 원활했기 때문에 sortable 를 사용하고 있습니다.

sortable로 정렬한 요소의 순서를 보존할 때에는 gem의 인스톨이나 컨트롤러의 추기가 필요하므로, 이번은 할애하겠습니다.

②쓰레기통 아이콘(".trash-box")에 요소가 드롭되었을 때 이벤트를 발화하도록 합니다.
각 옵션에 대해서는 아래 표를 참조하십시오.
코드를 따라 설명하면,
accept에서 item의 drop을 받아들입니다. item이 drag 되고 있는 동안, trash-box 에 "move-trash" 라고 하는 클래스가 추가된다고 하는 흐름입니다.

③drop된 item의 요소를 취득
jQuery 객체에서 DOM 요소를 검색하기 위해 ui.draggable[0];delete_item 에 drop 된 item 의 DOM 요소가 대입됩니다.

④drop된 요소의 id를 취득
drop 되었을 때 방금전에 view에 추기한, item_id 를 취득해, 삭제할 때의 패스에 대입합니다.

⑤ajax로 controller에 보내는 정보를 기입
여기서 주의해야 할 것은 data: {id: delete_ID, "_method": "DELETE"} 입니다.
이번에는 삭제 기능이므로 HTTP 메서드를 DELETE 요청으로 선언해야합니다!

⑥비동기 성공시의 이벤트를 기재delete_item.remove(); 에서 이미지를 뷰 위에서 지웁니다.location.reload();에서 다시로드하면 구현이 완료되었습니다.