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) 而不是下拉项。

这就是为什么双击似乎是更好的解决方案。点按一下 select 下拉项，点按两次即可复制。

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?

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

Dragula - copy element on double tap (mobile)

javascript

jquery

double-click