Dragula - Ziehen Elemente von einem Behälter zu verschiedenen Elementen

Question

ist Meine Frage an Dragula https://github.com/bevacqua/dragula Zusammenhang

Ich versuche, Elemente aus einem Container ziehen sie (Kopie bewegt sich nicht) in verschiedene Behälter. Also, auf diese Weise habe ich einen Container, der Elemente zum Ziehen enthält, und ich möchte sie in verschiedene Container fallen lassen, aber es funktioniert nicht richtig und manchmal funktioniert es gar nicht. Bitte zeigen Sie mir, was mit meinem Code nicht stimmt.

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

}); 

Ihre Anregungen wird sehr geschätzt.

Vielen Dank.

Answer 1

Hatte die gleiche Grundvoraussetzung (ein "Quellcontainer" zu kopieren). Ich denke, Sie sollten alles innerhalb eines Drake-Objekts behandeln, das alle Container enthält und das Verhalten mit seinen Optionen handhabt.

Der Schlüssel einen „Quellbehälter“ zu haben, von zu kopieren ist eine einfache Methode als Kopieroption haben:

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

Also in diesem Fall, dass Sie von Medien-list-Ziel-Links zu anderen kopieren Container, aber keine Elemente in diesen Container fallen lassen.