調整div的大小並使其可拖動

我希望div可拖動，並且當光標位於div的大小圖標上時應該可以調整大小。如果我使用可拖動的方法並調整大小隻draggable工作，它沒有可拖動的方法，但我希望它是可移動的，以及當光標處於調整大小圖標時調整大小。任何人都可以幫助我嗎？調整div的大小並使其可拖動

$("div").draggable();

div { 
 
    margin: 30px; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 0.3%; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    resize: both; 
 
} 
 

 
img { 
 
    z-index: 0; 
 
    width: 99%; 
 
    height: 99%; 
 
    -webkit-user-select: none; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div> 
 
    <img draggable="false" src="http://www.crash.lshtm.ac.uk/Images/image44p.jpg"></img> 
 
</div>

來源

2017-04-25 Bhanu Tharun

沒有正確理解您的問題。你能簡單解釋一下嗎？ –

你可以看到，如果你點擊該圖像並拖動它，那麼它是可移動的。但如果我點擊調整大小圖標上的圖像邊緣，圖像不應該被移動，而應該調整大小後調整大小。如果你點擊圖像並拖動它，調整後的圖像應該是可移動的 –

好吧，檢查答案並告訴我它是否對你有幫助。 @BhanuTharun –

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" /> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<head> 
 

 
<body> 
 
<div id="rnd" style="display:inline-block"> 
 
<img id="img_rnd" style="border:1px solid red" src="http://www.crash.lshtm.ac.uk/Images/image44p.jpg" /> 
 
</div> 
 
<script> 
 
$('#img_rnd').resizable(); 
 
$('#rnd').draggable({ 
 
    appendTo: 'body', 
 
    start: function(event, ui) { 
 
     isDraggingMedia = true; 
 
    }, 
 
    stop: function(event, ui) { 
 
     isDraggingMedia = false; 
 
     // blah 
 
    } 
 
}); 
 

 
</script> 
 

 
</body> 
 
</html>

這一定會幫助你。 :)

來源

2017-04-25 07:12:50

它對你的問題有幫助嗎？ –

是的這很有幫助，謝謝。 –

不提！樂於幫助：） –

你好，我做了工作演示。

可能是jquery-ui css無法正常工作。檢查此密碼

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Resizable - Default functionality</title> 

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

    <style> 
    #resizable { width: 150px; height: 150px; padding: 0.5em; } 
    #resizable h3 { text-align: center; margin: 0; } 
    </style> 

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

    <script> 
    $(function() { 
     /*aspectRatio option is maintain div aspect ratio so image will display properly*/ 
     $("#resizable").resizable({'aspectRatio' :true}); 
     $("#resizable").draggable(); 
    }); 
    </script> 
    <style> 
     body { 
     font-family: Arial, Helvetica, sans-serif; 
     } 
     table { 
     font-size: 1em; 
     } 
     .ui-draggable, .ui-droppable { 
     background-position: top; 
     } 
    </style> 
</head> 
<body> 



<div id="resizable" class="ui-widget-content"> 
    <img id="resizable1" src="http://www.crash.lshtm.ac.uk/Images/image44p.jpg" style="width: 100%;height: auto"></img> 
</div> 


</body> 
</html>

來源

2017-04-25 07:56:00

調整div的大小並使其可拖動

回答

相關問題