Gridstack.js: 사용자 정의 드래그 핸들

사용자 정의 드래그 핸들 사용에 대한 예가 있습니까?
패널 헤더(전체가 아님)를 사용하여 항목을 드래그 가능하게 만들려고 합니다. 가능한 많은 조합으로 아래 코드를 시도했지만 성공하지 못했습니다.

    <div class="grid-stack">
        <div class="grid-stack-item"
                 data-gs-x="0" data-gs-y="0"
                 data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content panel panel-default">
                <div class="panel-heading clearfix">
                    <span class="panel-title pull-left"><span class="glyphicon glyphicon-asterisk"></span> <span class="panel-title-text">Featuring</span></span>
                </div>
                <div class="panel-body ">
                    <ul class="list-group">
                        <li class="list-group-item">a</li>
                        <li class="list-group-item">v</li>
                    </ul>
                </div>
            </div>
        </div>
    </div

js 코드:

    var options = {
        cell_height: 80,
        vertical_margin: 10,
        animate: true,
        handle:  ??? 
    };
    this.$('.grid-stack').gridstack(options);

handle:'.panel' , handle:'panel-heading' 및 핸들 없이 시도했습니다. 그리고 grid-stack-item-content 클래스도 제거하려고 시도했지만 모든 경우에 결과는 either the whole thing moves or nothing moves at all .

항목을 헤더로만 이동 가능하게 만드는 방법은 무엇입니까?