Rendre l'image déplaçable à la souris déplaçable sur tactile

Résolu/Fermé
sallix Messages postés 7 Date d'inscription vendredi 4 février 2022 Statut Membre Dernière intervention 21 juillet 2022 - 21 juil. 2022 à 20:04
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 21 juil. 2022 à 20:21

Bonjour,

je viens vers vous  car j'ai besoin de votre aide, je ne parviens pas à faire de la même chose en tactile, c'est à dire :

j'ai un bouton qui crée une image et celle-ci peut être déplacée librement dans une div. je cherche un moyen pour que cela fonctionne aussi.

S'il vous plaît si vous avez des solutions je suis preneur ! 

j'ai déjà essayé des addEventListener  touch (start, move...) mais je suis pas sur de bien les utiliser...

//html

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

//css


.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


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();
}
A voir également:

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
21 juil. 2022 à 20:21
0