1

我的问题与 Dragula 有关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(); }

});

您的建议将不胜感激。

谢谢你。

4

1 回答 1

2

具有相同的基本要求（要从中复制一个“源容器”）。我认为您应该在一个拥有所有容器并使用其选项处理行为的德雷克对象中处理这一切。

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

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 回答