jQuery UI：如何使可拖动的div可调整大小

Question

I am trying to make my draggable div element resizable too with jquery- ui resizable() method.

For some reason while I am able to drag it it doesn't let me resize it.

 $('.resize').resizable({ grid: [1, 1] }); $('.dragThis').draggable({ drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; $('#posX').text('x: ' + xPos); $('#posY').text('y: ' + yPos); } }); 

 .dragThis { position: absolute; top: 100px; left: 100px; overflow: visible; width: 150px; height: 150px; background-repeat: no-repeat; background-position: center; background-image: url('https://image.flaticon.com/icons/png/128/148/148836.png'); } #outline { position: absolute; border: 1px dashed black; border-radius: 50%; width: 150px; height: 150px; -webkit-animation: rotate 10s linear infinite; position: absolute; z-index: 30000; transform: translate(-50%, -50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <div class="resize dragThis"> <ul style="font-family: 'Nunito'; position:absolute; left:-20px; top:-20px; list-style: none; font-size: 12px; font-weight:600;"> <li id="posX"></li> <li id="posY"></li> </ul> <div style="position:absolute; top:50%; left:50%; width:10px; height:10px; background-color:white; z-index:1000; border-radius:50%; border:1px solid black; transform: translate(-50%, -50%);"> <div style="width:9px; height:1px; border:0.2px solid black; position:absolute; top:50%; left:0px; transform: translateY(-50%);"></div> <div style="width:1px; height:9px; border:0.2px solid black; position:absolute; top:0px; left:50%; transform: translateX(-50%);"></div> </div> <div id="outline"></div> </div> 

Answer 1

So the resizable function is adding the resize handles correctly, but the problem is they're zero pixels tall because you haven't included the jQuery UI CSS stylesheet, which styles the resize handles for you.

You can either add some CSS yourself, or you can pick up the stylesheet(s) you need under the Themes heading on the jQuery site .

In the snippet below, I added one big, gray handle on the right side, which you can drag to resize, as an example of adding your own CSS.

 $('.dragThis').draggable({ drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; $('#posX').text('x: ' + xPos); $('#posY').text('y: ' + yPos); } }); $('.resize').resizable({ grid: [1, 1], handles: 'e' }); 

 .dragThis { position: absolute; top: 100px; left: 100px; overflow: visible; width: 150px; height: 150px; background-repeat: no-repeat; background-position: center; background-image: url('https://image.flaticon.com/icons/png/128/148/148836.png'); } #outline { position: absolute; border: 1px dashed black; border-radius: 50%; width: 150px; height: 150px; -webkit-animation: rotate 10s linear infinite; position: absolute; z-index: 30000; transform: translate(-50%, -50%); } .ui-resizable-handle { width: 15px; height: 100%; display: block; background-color: gray; position: absolute; right: 0; top: 0; cursor: ew-resize; } 

 <div class="resize dragThis"> <ul style="font-family: 'Nunito'; position:absolute; left:-20px; top:-20px; list-style: none; font-size: 12px; font-weight:600;"> <li id="posX"></li> <li id="posY"></li> </ul> <div style="position:absolute; top:50%; left:50%; width:10px; height:10px; background-color:white; z-index:1000; border-radius:50%; border:1px solid black; transform: translate(-50%, -50%);"> <div style="width:9px; height:1px; border:0.2px solid black; position:absolute; top:50%; left:0px; transform: translateY(-50%);"></div> <div style="width:1px; height:9px; border:0.2px solid black; position:absolute; top:0px; left:50%; transform: translateX(-50%);"></div> </div> <div id="outline"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>