Problem Scroll bar with dredge

I have a series of elements (img) that can be dragged (dredgers) and if they do not fit on the wide screen, I pull out a scroll bar.

I have several problems:

1º In the tablets and / or mobiles when you try to move the element with your finger on the img so that the others are shown, the draggable is activated so the element is picked up and the scroll is not moved.

2º I also need the above to recognize if you have pressed it, to play a sound, or if you are trying to drag it or if you want to move and see the other elements:

In summary 3 things:

Recognize that you press and play the sound.

Move with your finger and move the elements.

Without losing what I have "To move an element of the screen and put it somewhere else".

The code:

This is where the auto overflow is. and inside the div id="tab" where the img are dynamically placed.

  <div class="teclado col-md-12" id="teclado" style="width: 100%; overflow-x: auto;  height: 50%; overflow-y: hidden;">
      <div id="ficha" class="row"></div>  
  </div>

Here is the part of the ajax code to collect the img and put them in the div id = tab, you can also see the dragable property

                    var form = '';
                    form = form + ('<li class="accioform" style="width: 150px; float: left;" draggable="true" id="' + i + '">');
                    form = form + ('<input type="hidden" class="idef" value="' + ob[i].id_accion + '"  id="' + id_accion + '" name="idaccion"/>');
                    form = form + ('<input type="hidden" class="colorcito" value="' + ob[i].color + '"  id="' + id_color + '" name="idcolor"/>');
                    form = form + ('<img name="" class="img-responsive imgf" src="' + ob[i].imagen + '" id="' + id_imagen + '" style="border:4px solid'+ob[i].color+';"/>');
                    form = form + ('<audio id="' + id_sonido + '" src="' + ob[i].sonido + '" class="sound"></audio>');
                    form = form + ('<p style="text-align: center;" name="nombre" id="' + id_nombre + '">' + ob[i].nombre + '</p>');
                    form = form + ('</li>');

                    $("#ficha").append(form);

Finally I put the function of the dragable:

            $(".accioform").draggable({
                drag: function(evt, ui){
                    dragged = {
                            identificador: $(this).find(".idef").val(),
                            img: $(this).find(".imgf").attr('src'),
                            son: $(this).find(".sound").attr('src'),
                            parrafo: $(this).find("p").text(),
                            colorin: $(this).find(".colorcito").val()
                    };
                },
                appendTo: "body",
                helper: "clone",
                revert: true,
                revertDuration: 0,
                containment: "window"
            });

I attached an image, so you can see how computers had to put the scroll bar, but in the tablets / mobile, the bar is like it is VERY thin, almost invisible, the application is being developed for people with cognitive disabilities and mobility, so I need to be able to move these images with your finger, but when you press you are already dredging, and as you dredge the scroll does not scroll and you also want it to detect if what you want is to move or press to that the sound is reproduced.

These are the 3 problems I spoke about at the beginning. Thank you very much, I hope you can help me, guide me or anything is welcome.