redimensionnable div Css/JQuery

Question

Salut Comment puis-je créer un div redimensionnable?

<div id="main"> 

</div> 

---

#main { 
    width: 100 px; 
    box-shadow: #254C58 1px 0px; 
    border: #3C7D91 5 px double; 
    padding: 10 px 10 px 10 px 10 px; 
    overflow - y: scroll; 
    max-height: 433 px; 
} 

---

$(document).ready(function() { 
    $('#main').resizable(); 

}); 

Voici mon jsFiddle à ma question:

Ceci est un exemple, mais il ne fonctionne pas: https://jsfiddle.net/tetut91e/2/

peut-elle aider quelqu'un moi?

Answer 1

voici ce que vous cherchez

resize: both; 

ici est le code de travail: https://jsfiddle.net/tetut91e/5/

Answer 2

U besoin d'ajouter jquery-ui.js

<div id="main"></div> 

$(document).ready(function() { 
$("#main").resizable(); 
}); 

Je mis à jour votre code jsFiddle link

Answer 3

Dans votre Fiddle vous n'avez pas défini jQuery UI et jQuery comme dependecies et aussi Tere quelques problèmes avec votre code CSS (ex: remplacer 10 px avec 10px)

DEMO

#main { 
    width: 100px; 
    box-shadow: #254C58 1px 0px; 
    border: #3C7D91 5 px double; 
    padding: 10px 10px 10px 10px; 
    overflow - y: scroll; 
    max-height: 433 px; 
    background:#f00; 
    min-height:50px; 
    display:inline-block; 
} 

Answer 4

Dans votre code des js externes et css manquaient, et il y avait aussi des erreurs dans le code CSS. Veuillez trouver ci-dessous le code de travail.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<style type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"></style> 

<style> 
    #main { 
     width: 100 px; 
     box-shadow: #254C58 1px 0px; 
     border: #3C7D91 5px double; 
     padding: 10px 10px 10px 10px; 
     overflow - y: scroll; 
     max-height: 433px; 
    } 
</style> 
<div id="main"> 

</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#main').draggable(); 
     $('#main').resizable(); 

    }); 
</script>