jindo.m.DragArea, DropArea

DragArea

• 영역 제한
• threshold, drag 영역 제한 옵션 등
• 커스텀 이벤트 제공

DropArea

• DragArea와 같이 사용해야 함
• 커스텀 이벤트 제공

jQuery UI

JC/JMC와 거의 1:1 대응되는 형태로 제공됨

• draggable
• droppable

장점

• jQuery 재단의 product로 안정성 및 유지 등의 신뢰성 보유
• 기존 JC/JMC와 흡사한 기능을 제공

단점

• touch가 지원되지 않아, 별도의 터치 라이브러리 사용필요 (ex. https://github.com/furf/jquery-ui-touch-punch)
• jquery-ui의 기본 구성 코드와 같이 사용되므로 용량에 대한 문제 (minified 77.9kb)

Dragula

https://github.com/bevacqua/dragula

최근들어 인기도가 상승한 라이브러리로, 쉽게 사용할 수 있는 것이 특징 d&d 대상요소가 포함된 컨테이너를 지정하며, 컨테이너 내의 모든 요소들이 드래그 대상이 되며, 다른 컨테이너에 drop 할수 있음.

    <div class="box" id='left'>
        <div id="box1" class="item"><span>box1</span></div>
    </div>
    <div class="box" id='right'>
        <p style="float:left">text</p>
    </div>
    <script>
       dragula([document.getElementById('left'), document.getElementById('right')], {
           // options
       });
    </script>

장점

• Angular, React bridge 제공
• 타 라이브러리 의존성 없음
• 적은용량 (minified 10.8kb)
• 컨테이너 내의 요소에 따라 자동으로 배치 위치 지정
• 데스크탑(IE7+ 및 모던 브라우저) 및 모바일 지원

단점

• 요소 이동시 left/top 사용
• drop시 배치가 컨테이너 내의 요소에 따라 자동으로 지정되므로, 세밀한 위치 지정이 어려움

Draggabilly

https://github.com/desandro/draggabilly

JC/JMC의 DragArea와 매우 유사한 기능을 제공한다.

장점

• 요소 이동시 translate3d로 이동처리
• 데스크탑(IE8+ 및 모던 브라우저) 및 모바일 지원
• masonry 개발자의 product로 어느정도의 신뢰성 기대가능

단점

• 마지막 업데이트가 6개월전 (2015/05)
• 같이 사용할 drop 컴포넌트가 존재하지 않음
• 타 라이브러리에 비해 큰 용량 (minified 20.7kb)

jquery.pep.js

https://github.com/briangonzalez/jquery.pep.js

jQuery 의존성을 갖는 라이브러리로, drag와 drop 모두 처리 가능하다.

<div class="box" id='left'></div>
<div class="box" id='right'>drop</div>
<script>
    // drag 대상과 drop 대상을 한번에 지정
    $("#left").pep({
        droppable: "#right"
    });
</script>

장점

• 요소 이동시 translate 사용
• 적은용량 (minified 4.2kb)
• 호환성 (데스크탑 (IE6+ 및 모던 브라우저)와 터치지원)

단점

• 업데이트가 꾸준히 되지만, 아주 활발하지는 않음

결론

비교 테이블

이름	크기	마지막 릴리즈	지원환경	기타
jQuery UI	77.9kb	2015/03	데스크탑	터치 미지원
Dragula	10.8kb	2015/11	데스크탑 및 모바일	의존성 없음
Draggabilly	20.7kb	2015/05	데스크탑 및 모바일	translate 사용, drop 라이브러리 별도 필요
jquery.pep.js	4.2kb	2015/10	데스크탑 및 모바일	translate 사용

추천 라이브러리

jquery.pep.js의 사용을 추천합니다.

일반적으로 drag 및 drop은 같이 사용되어지는 경우가 대부분이기 때문에 각각의 별도 라이브러리를 사용하기 보다는 하나의 라이브러리 내에서 처리되는 것이 기능적인 면과 안정성면에서 유리합니다.

또한 데스크탑과 모바일 모두 지원이 되고 있고, jQuery 의존성을 가지고 있지만 아주 적은 크기와 성능적인 측면(요소 이동시 translate 사용)도 적합한 것으로 판단됩니다.

사용하고자 하는 기능에 따라 jquery.pep.js외, 다른 라이브러리의 사용을 고려해 볼수도 있습니다.

• 테이블 형태 목록의 d&d 처리는 Sortable이 적합할 수 있습니다.