Dragula - copy element on double tap (mobile)

Question

Is there a way to copy dragula element from one container to another using double click (double tap) for mobile views only? The dragging is not working great on mobiles, as the screen scrolls when you press and hold element with your finger.

To make things even more interesting, my draggable elements are divs 'btn-group' which have drop-down buttons such as:

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

I am copying the divs (btn-group) not the dropdown-items.

That is why double tap seems a better solution. One tap to select dropdown item, double tap to copy across.

Are you copying a dropdown item to what? You need to disable bootstrap's dropdown-item click event to do that first. — Taha Paksu, Apr 03 '18 at 08:52

Taha Paksu · Accepted Answer · 2018-04-03T10:51:22.337

You can disable the default dropdown item click by using event.preventDefault() in the click event. And then on doubleclick, you can move the clicked item.

$("#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>

And for the mobile detection, you can wrap these methods inside something like this:

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

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

Taken from here:

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

Hi Taha, thanks for your answer but this moves the object, rather than copying it. I would like to copy it over. Ideally using dragula syntax (if possible). And I believe we misunderstood each other. I am not copying the dropdown items, but the button itself, although it does not matter what the object is for the question principle. — lovemyjob, Apr 03 '18 at 09:31
I checked and saw that dragula component doesn't have a programmatically drag method, and I switched from `detach()` to `clone()` in my answer to copy the element instead of moving. — Taha Paksu, Apr 03 '18 at 10:52

Dragula - copy element on double tap (mobile)

1 Answers1