拖放 + 滚动

Question

我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧边菜单。

当我滚动屏幕时，项目的位置弄乱了。

我试图在 google 上寻找一些东西，结果遇到了这个问题：jQuery draggable shows helper in wrong place after page scrolled

要么我没有正确应用他们的建议，要么它仍然不起作用。

我也试过采纳这个建议：http://jsfiddle.net/7AxXE/ but I get an error saying that draggable is not a function.

在这里您可以找到我的应用示例

https://denisorlandidesouza.outsystemscloud.com/Test/

单击右上角的“确定”按钮会显示一个侧边菜单，当您拖动项目并滚动页面时，您会看到该行为。

JQuery版本：1.8.3

Answer 1

这是 jQuery ui 的错误，已在 1.10.3 中修复（检查 Changelog Interactions->Draggable->first line）。

它应该将您拖动的元素粘贴到光标上，即使您滚动并使其固定。当它已经被修复时，它的行为相反。

您应该考虑更新 jquery ui 版本，因为您使用的是 1.9.1。

Answer 2

使用jQuery UI拖放事件，看看下面的例子，我想这会对你有所帮助。

$(function() {
  $(".sidebar .draggable").draggable({
   grid: [ 20, 20 ],
   appendTo: '#droppable',
   containment: "window",
   cursor: 'move',
   revertDuration: 100,
   revert: 'invalid',
   helper: 'clone'
  });

  $("#droppable").droppable({
   accept: ".sidebar .draggable",
   drop: function (event, ui) {
    ui.helper.clone().appendTo('#droppable');
    $(".container .draggable").draggable({     
     containment:"#droppable"
    });    
   }
  }); 
 });

*{ box-sizing:border-box; margin:0; padding:0;}
    body {
       font-family: sans-serif;
  color: #414141;
  font-size: 14px;
  background:#f9f9f9;
    }
   
  .container{
  width:100%; 
  min-height:100vh; 
    position:relative;
  float:left;
    display:flex;
 }
 .sidebar{  
  width:200px;
    float:right;
  font-family: sans-serif;
  color: #414141;
  font-size: 14px;
 }
 
 .elements{ padding:5px; border:1px dashed #ccc; margin:5px 0; float:left;}
 
 .sidebar .elements{ width:100%; }

 .droppable-div{
  width:calc(100% - 250px); 
  flex:1;
  position:relative;
 }

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <div class="container">
   <div id="droppable" class="droppable-div">   
     
   </div>
      
      <div class="sidebar">
   <div class="elements draggable">In-Ear Audio Sport Gold</div>
   <div class="elements draggable">In-Ear Audio White</div>
   <div class="elements draggable">Notarum Black</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Slim Black</div>
   <div class="elements draggable">Notarum Light Black</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Printer Coloris Express Series</div>
   <div class="elements draggable">Pictura Slim</div>
   <div class="elements draggable">In-Ear Audio Sport Gold</div>
   <div class="elements draggable">In-Ear Audio White</div>
   <div class="elements draggable">Notarum Black</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Slim Black</div>
   <div class="elements draggable">Notarum Light Black</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Printer Coloris Express Series</div>
   <div class="elements draggable">Pictura Slim</div>
   <div class="elements draggable">In-Ear Audio Sport Gold</div>
   <div class="elements draggable">In-Ear Audio White</div>
   <div class="elements draggable">Notarum Black</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Slim Black</div>
   <div class="elements draggable">Notarum Light Black</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Printer Coloris Express Series</div>
   <div class="elements draggable">Pictura Slim</div>
  </div> 
  </div>

拖放 + 滚动

Drag and Drop + Scroll

jquery

drag-and-drop