Tengo un botón que crea una imagen que se puede arrastrar con el mouse, pero no sé cómo hacer que se pueda arrastrar en una pantalla táctil.
En este código, puede hacer clic en la imagen y luego moverla, pero no desde un teléfono móvil u otra pantalla táctil.
Aquí está el código:
function addimageBouchon() { var img = document.createElement("img"); img.src = "https://votrenourrice.fr/img/bouchon.svg"; img.height = 50; img.width = 50; var class_name = "buttonImg"; img.setAttribute("class", class_name); document.getElementById("myDiagramDiv").appendChild(img); $(img).draggable(); } .box{ background: linear-gradient(60deg, #080808, #606060); border: 2mm ridge #696969; opacity: 99%; padding: 15px; overflow-y: auto; width: 20vw; animation: animate 4s linear infinite; } .box div h2{ text-align: center; color: orange; text-decoration: underline; } .box div p{ text-align: center; color:palegoldenrod; text-decoration: underline; font-size: 0.8em; } .partieButton{ display: flex; flex-wrap: wrap; justify-content:center; } .buttonCreate{ margin: 3px; box-shadow: 3px 3px ; border-radius: 6px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <div class="container"> <div class="description"> <div id="myDiagramDiv" draggable="true" style="width: 70vw; height:100vh; background-color: #DAE4E4;opacity: 80%;"></div> </div> </div> <div class="box"> <div class="partieButton"> <div class="buttonCreate" > <button type="button" class="buttonImg" onclick="addimageBouchon();"><img src="https://votrenourrice.fr/img/bouchon.svg" height ="40" width="40" alt="bouchon" /></button> </div> </div> </div>