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

Question

有没有一种方法可以仅针对移动 View 使用双击(双击)将 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?