javascript - Dragula - 将元素从一个容器拖到不同的元素

Question

我的问题与拖古拉有关 https://github.com/bevacqua/dragula

我正在尝试将元素从一个容器中拖放到不同的容器中(复制而不是移动)。因此，通过这种方式，我有一个包含要拖动的元素的容器，我想将它们放入不同的容器中，但它无法正常工作，有时甚至根本无法工作。请指导我的代码有什么问题。

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

});

我们将非常感谢您的建议。

谢谢。

Answer 1

具有相同的基本要求(从中复制一个“源容器”)。我认为你应该在一个 drake 对象中处理这一切，该对象具有所有容器并通过其选项处理行为。

拥有一个“源容器”进行复制的关键是有一个简单的方法作为复制选项:

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 复制到其他容器，但不能将元素放入此容器中。