Dragula - 異なる要素への1つのコンテナからドラッグ要素が

Question

私の質問は、私は1つのコンテナから要素をドラッグして別の容器に（移動しないコピー）にドロップしようとしていますdragula 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(); } 

}); 

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

ありがとうございます。

Answer 1

同じ基本要件（コピー元から1つの「ソースコンテナ」）が必要です。 私は、すべてのコンテナを持ち、そのオプションでビヘイビアを処理する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'; 
     } 
    } 
); 

したがって、この場合には、あなたが他のメディアリスト標的左からコピーすることができますこのコンテナに要素をドロップすることはできません。