I have a button that creates a draggable image with the mouse, but I don't know how to make it draggable on a touch screen.
In this code you can click on the image then move it but not from a mobile or other touch screen.
Here is the code:
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>