Dragula - 双击复制元素（移动设备）

Question

有没有办法通过双击（双击）将dragula 元素从一个容器复制到另一个容器，仅用于移动视图？拖动在手机上效果不佳，因为当您用手指按住元素时屏幕会滚动。

为了让事情变得更有趣，我的可拖动元素是 div 'btn-group'，它具有下拉按钮，例如：

<div class="btn-group">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton1">
   OPTIONS
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <a class="dropdown-item" href="#!">OPTION 1</a>
    <a class="dropdown-item" href="#!">OPTION 2</a>
    <a class="dropdown-item" href="#!">OPTION 3</a>
  </div>
</div>

我正在复制 div（btn-group）而不是下拉项。

这就是为什么双击似乎是更好的解决方案。一键选择下拉项，双击复制。

Answer 1

您可以通过在点击事件中使用event.preventDefault() 来禁用默认下拉项点击。然后在双击时，您可以移动点击的项目。

$("#copyfrom .dropdown-item").on("click", function(e){
  e.preventDefault();  
  return false;
});

$("#copyfrom .dropdown-item").on("dblclick", function(){
  $(this).clone().appendTo("#copyto");
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

Dropdown Source:<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" id="copyfrom">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Dropdown Target:<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" id="copyto">
  </div>
</div>

对于移动检测，您可以将这些方法封装在如下内容中：

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        // Run the code above.
    }
 });

取自这里：

What is the best way to detect a mobile device in jQuery?