Dragula-在双击(移动)上复制元素

Question

是否有一种方法将dragula元素从一个容器中复制到另一个容器，仅使用双击(双击(以获取移动视图？拖动在手机上的效果不佳，因为屏幕用手指按下并握住元素时滚动。

为了使事情变得更有趣，我的可拖动元素是Divs" BTN组"，它们具有下拉按钮，例如：

<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>

我正在复制Divs(BTN group(而不是下拉项。

这就是为什么Double Tap似乎是更好的解决方案的原因。一点点以选择下拉物品，双击要复制。

Answer 1

您可以在单击事件中使用event.preventDefault()单击默认下拉项。然后在DoubleClick上，您可以移动点击项目。

$("#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.
    }
 });

从这里取：

检测jQuery中移动设备的最佳方法是什么？