如何将一个div项目从一个可滚动区域拖放到另一个可滚动区域？

Question

我想制作一个垂直且可滚动的自定义 div 列表，我想将它们从它拖动到另一个 div 区域（可放置的区域），也可以垂直滚动，请参见下图：

我无法使用以下 HTML 代码来做到这一点：

<div class="container-fluid">
   <div id="sdsds" class="row">  
      <button id="addNewDevice" class="btn btn-primary">New Device</button>
   </div>
   <br>
   <div id="shared-lists" class="row">
      <div id="example2-left" class="list-group col"  style="overflow-y: scroll;height: 23em; max-width: 30%;">
         <div id="parentItem_Device1" class="list-group-item draggable" style="background-color: #ffffff26; border: 3px solid #a1a1a1; margin-bottom: 5px; padding: 0.1rem 0.25rem; position: relative;">
            <div class="row">
               <div class="col-form-label col-lg-6 col-sm-6 col-xs-6 col-md-6 col-xl-9 col-xxl-6">
                  <svg style="cursor: move;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
                     <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path>
                  </svg>
                  <span id="parentItemName_Device1">Device 1<span> </span></span>
               </div>
               <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 col-xl-1 col-xxl-1">
                  <a href="javascript:;" id="ww" class="btn btn-sm btn-clean btn-icon" title="Delete">
                     <span class="svg-icon svg-icon-md">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="24px" viewBox="0 0 24 24" version="1.1">
                           <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <rect x="0" y="0" width="24" height="24"></rect>
                              <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#B5B5C3" fill-rule="nonzero"></path>
                              <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"></path>
                           </g>
                        </svg>
                     </span>
                  </a>
               </div>
            </div>
         </div>
      </div>
      <div id="example2-right" class="list-group col"  style="overflow-y: scroll;height: 23em;">
         <div class="list-group-item tinted treeParent" style="background-color: #78787826; border: 3px solid #a1a1a1; margin-bottom: 5px;">
            <span>DESTINATION 1</span>
            <div id="droppable" class="dropzones">
               <p>Drop here</p>
            </div>
         </div>
         <div class="list-group-item tinted treeParent" style="background-color: #78787826; border: 3px solid #a1a1a1; margin-bottom: 5px;">
            <span>DESTINATION 1</span>                                 
            <div id="droppable2" class="dropzones">
               <p>Drop here</p>
            </div>
         </div>
      </div>
   </div>
</div>

每次我尝试拖动一个项目时，我都无法做到这一点，因为可滚动区域不允许我这样做，请参阅图片：

这是我的基本 jquery 可拖动/可放置代码：

$(".draggable").draggable({
    revert: "false",
    helper: "clone"
});

$('.dropzones').droppable({ 
    drop: function(event, ui) {
        var newClone = $(ui.helper).clone();
        $(this).after(newClone);
    } 
});

我已经使用了这个 jquery 库。版本：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

你有什么建议吗？

Answer 1

也许您可以删除拖动项目时的滚动溢出。这里我给

<div>

类名

noscroll

让溢出被隐藏。当发生删除时，类名将再次删除。如有必要，也可以对目的地进行同样的操作。

document.querySelector('ul.source').addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.dataset.id);
  e.target.closest('div').classList.add('noscroll');
});

document.querySelector('ul.destination').addEventListener('dragover', e => {
  e.preventDefault();
  //e.target.closest('div').classList.add('noscroll');
});

document.querySelector('ul.destination').addEventListener('drop', e => {
  e.preventDefault();
  let id = e.dataTransfer.getData('text/plain');
  let sourceElm = document.querySelector(`li[data-id="${id}"]`);
  e.target.closest('ul.destination').append(sourceElm);
  [...document.querySelectorAll('div.noscroll')]
    .forEach(div => div.classList.remove('noscroll'));
});

body {
  display: grid;
}

div {
  grid-template-columns: 50vw 50vw;
  border: solid thin black;
  overflow: scroll;
  height: 50vh;
}

div.noscroll {
  overflow: hidden;
}

div:nth-child(1){
  grid-column: 1;
  
}

div:nth-child(2){
  grid-column: 2;
}

ul {
  list-style: none;
  margin: 0;
  padding: .5em;
  height: 80vh;
  width: 70vw;
}

ul.destination:after {
  display: inline-block;
  content: "Drop here...";
  background-color: white;
  border: dotted black medium;
  width: 100%;
  padding: .5em;
  margin: .5em;
}

li {
  border: solid thin navy;
  padding: .5em;
  margin: .5em;
}

<div>
  <ul class="source">
    <li draggable="true" data-id="1">Item 1</li>
    <li draggable="true" data-id="2">Item 2</li>
  </ul>
</div>
<div>
  <ul class="destination"></ul>
</div>