1

私の質問はドラグラに関連しています https://github.com/bevacqua/dragula

あるコンテナから要素をドラッグして、別のコンテナにドロップ (移動ではなくコピー) しようとしています。このようにして、ドラッグする要素を含むコンテナが1つあり、それらを別のコンテナにドロップしたいのですが、正しく機能せず、まったく機能しないこともあります。私のコードの何が問題なのか教えてください。

HTML

 /*container which contains elements to drag */
 <div class="row">
    <div class="col-md-12">
        <div class="activityIcons" style="text-align:center;">
            <ul class="media-list media-list-container" id="media-list-target-left">
                  <li class="media" style="display:inline-block;" id="phone">
                        <div class="media-left media-middle dots" ><i class="icon-phone2 text-indigo-800 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Phone Call" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
            </li> 

            <li class="media" style="display:inline-block;" id="history">
                    <div class="media-left media-middle dots"><i class="icon-history text-orange-600 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Review Order History" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
            </li>  
            <li class="media" style="display:inline-block;" id="order">
                    <div class="media-left media-middle dots"><i class="text-blue-600 icon-cart-add2 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Place Product Order" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
            </li> 
        </ul>
        </div>
    </div> 
    </div>

    /* containers where elements will be dropped */
    <div class="activity" id="1" style="margin-top: 5px; padding:5px; border: 1px solid #ccc;">
        <div class="row activityDetail" id="1" style="padding:5px; margin:15px;">
            <div class="col-md-12" style="border-bottom:1px solid #ddd;">
                    <span class="text-bold text-black actTime" style="cursor:pointer; margin-right:5px;">Time</span>
                    <span class="text-bold text-black regionCust" style="cursor:pointer; margin-right:5px;">Region & Customer</span>
                    <span class="media-list-container" id="activitiesBar1"><span class="dropMsg1">Drop Here</span></span>
                    <span class="pull-right stats">
                        <ul></ul>
                    </span>
                </div>
            </div>

            <div class="row activityDetailTwo" id="2" style="padding:5px; margin:15px;">
                <div class="col-md-12" style="border-bottom:1px solid #ddd;">
                    <span class="text-bold text-black actTimeTwo" id="2" style="cursor:pointer; margin-right:5px;">Time</span>
                    <span class="text-bold text-black regionCustTwo" id="2" style="cursor:pointer; margin-right:5px;">Region & Customer</span>
                    <span class="media-list-container" id="bar2"><span class="dropMsg2">Drop Here</span></span>
                    <span class="pull-right stats">
                        <ul></ul>
                    </span>
                </div>
            </div>

JQuery

dragula([document.getElementById('media-list-target-left'), document.getElementById('activitiesBar1')], {
        copy: true,
        revertOnSpill: true,
        mirrorContainer: document.querySelector('.media-list-container'),
        move: function (el, container, handle) { 
        return handle.classList.contains('dragula-handle'); 
    } 

    }).on('drop', function(el) {
        var actionId = $(el).attr('id');
        if($('#activitiesBar1').children('.dropMsg1').length > 0){ $('.dropMsg1').remove(); } 
        if(actionId ==  "phone"){ $('.callDuration').modal(); }
        if(actionId ==  "history"){ $('.orderHistoryModal').modal(); }
        if(actionId ==  "order"){ $('.catalog').modal(); }
        if(actionId ==  "chat"){ $('.conversation').modal(); }
        if(actionId ==  "reschedule"){ $('.schedule').modal(); }
        if(actionId ==  "training"){ $('.training').modal(); }
        if(actionId ==  "visit"){ $('.carExpenses').modal(); }

});

 dragula([document.getElementById('media-list-target-left'), document.getElementById('bar2')], {
        copy: true,
        revertOnSpill: true,
        mirrorContainer: document.querySelector('#bar2'),
        move: function (el, container, handle) { 
        return handle.classList.contains('dragula-handle'); 
    } 

    }).on('drop', function(el) {
        var actionId = $(el).attr('id');
        if($('#bar2').children('.dropMsg2').length > 0){ $('.dropMsg2').remove(); } 
        if(actionId ==  "phone"){ $('.callDuration').modal(); }
        if(actionId ==  "history"){ $('.orderHistoryModal').modal(); }
        if(actionId ==  "order"){ $('.catalog').modal(); }
        if(actionId ==  "chat"){ $('.conversation').modal(); }
        if(actionId ==  "reschedule"){ $('.schedule').modal(); }
        if(actionId ==  "training"){ $('.training').modal(); }
        if(actionId ==  "visit"){ $('.carExpenses').modal(); }

});

あなたの提案は高く評価されます。

ありがとうございました。

4

1 に答える 1

2

同じ基本要件 (コピー元の「ソース コンテナー」が 1 つ) がありました。すべてのコンテナーを持ち、そのオプションで動作を処理する 1 つのドレイク オブジェクト内ですべてを処理することになっていると思います。

コピー元の「ソース コンテナー」を 1 つ持つための鍵は、コピー オプションとして単純なメソッドを使用することです。

dragula([document.getElementById('media-list-target-left'), document.getElementById('activitiesBar1'), 
    document.getElementById('bar2')], {
        copy: function (el, source) {
            return source.id === 'media-list-target-left';
        },
        accepts: function (el, target) {
            return target.id !== 'media-list-target-left';
        }
    }
);

したがって、この場合、media-list-target-left から他のコンテナーにコピーできますが、要素をこのコンテナーにドロップすることはできません。

于 2016-11-21T09:26:47.393 に答える