Dragula - Drag elements from one container to different elements

Question

My question is related to dragula https://github.com/bevacqua/dragula

I am trying to drag elements from one container and drop them (copy not move) into different containers. So, in this way I have one container which contains elements to drag and I want to drop them into different containers but its not working properly and sometimes its not working at all. Please guide me what is wrong with my code.

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(); }

});

Your suggestions will be highly appreciated.

Thank you.

Answer 1

Had the same basic requirement (one "source container" to copy from). I think you are supposed to handle it all within one drake object that has all the containers and handles the behaviour with its options.

The key to have one "source container" to copy from is to have a simple method as copy option:

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';
        }
    }
);

So in this case you can copy from media-list-target-left to other containers but not drop elements into this container.