如何在jQuery中添加可拖動的「添加圖像」圖標

我很想知道如何添加add image圖標使用jQuery的堆棧溢出。當用戶點擊它時，它會增加它的大小，並且會在用戶放置的地方進行。如何在jQuery中添加可拖動的「添加圖像」圖標

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>jQuery UI Draggable - Default functionality</title> 
 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
 
     <style> 
 
      #draggable { width: 50px; height: 50px; padding: 0.5em; } 
 
     </style> 
 
     <script> 
 
      $(function() { 
 
       $("#draggable").draggable(); 
 
      }); 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="draggable" class="ui-widget-content"> 
 
      <image src="/addImage" /> 
 
     </div> 
 
    </body> 
 
</html>

在這裏，我已經添加簡單的圖像上用戶應該能夠把他想要放置的圖像。我不知道如何在拖動後增加div的大小。另外我想獲得用戶添加它的位置。

我也想應該問問上瀏覽PC上傳圖像

來源

2015-03-02 deepak

此代碼將增加可拖動的大小是被拖到後，將返回的位置（偏移）可拖動元素的：

$(function() { 
    $("#draggable").draggable({ 
     stop: function(event, ui) {   
      ui.helper.css({ 
       width: '200px', 
       height: '200px' 
      }); 
      $('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left) 
     } 
    }); 
});

Demo

參考

.draggable()

來源

2015-03-02 09:05:41 empiric

它的工作完美，但我希望它應該要求從客戶端PC上傳圖像並瀏覽 – deepak 2015-03-02 10:40:42

如何在jQuery中添加可拖動的「添加圖像」圖標

回答

相關問題