使用jQuery调整大小来显示项目的大小

Question

想知道是否有人可以提供帮助。我在网站上使用jQuery可调整大小。我想使用伪类将调整大小/可调整大小的对象显示为通知样式徽章，每次调整项目大小时都应该更新。 CSS不是问题，它获取大小数据并显示我遇到的问题。任何想法如何把这个关掉？任何帮助都感激不尽。我在下面的代码片段中有错误，所以这里有一个小工具可以使用。

https://jsfiddle.net/adrian_babb/xwaokufj/

<ul id="icon_menu"> 
    <li class="draggable"></li> 
</ul> 

draggable.ui-resizable:after { 
content: ""; 
position: absolute; 
top: -5px; 
right: -5px; 
font-size: .7em; 
background-color: #5f6a72; 
color: #ffffff; 
width: 20px; 
height: 20px; 
text-align: center; 
line-height: 20px; 
border-radius: 50%; 
} 

<script>   
$(document).ready(function($) { 

$(".droppable").droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     var $clone = ui.helper.clone(); 
     if (!$clone.is('.inside-droppable')) { 
      $(this).append($clone.addClass('inside-droppable').draggable({ 
       containment: '.droppable', 
       scroll: false, 
       tolerance: 'pointer', 
       position: 'relative', 
      })); 

      $clone.resizable({ 
       aspectRatio: 'true', 
       ghost: 'true', 
       handles: 'ne, nw, se, sw', 
       maxHeight: 200, 
       maxWidth: 200, 
       minHeight: 30, 
       minWidth: 30 
      }); 
     } 
    } 
}); 
$(".draggable").draggable({ 
    helper: 'clone', 

$(document).ready(function($) { 
 

 
    $(".droppable").droppable({ 
 
     accept: '.draggable', 
 
     drop: function(event, ui) { 
 
      var $clone = ui.helper.clone(); 
 
      if (!$clone.is('.inside-droppable')) { 
 
       $(this).append($clone.addClass('inside-droppable').draggable({ 
 
        containment: '.droppable', 
 
\t \t \t \t \t scroll: false, 
 
\t \t \t \t \t tolerance: 'pointer', 
 
\t \t \t \t \t position: 'relative', 
 
       })); 
 

 
       $clone.resizable({ 
 
\t \t \t \t \t aspectRatio: 'true', 
 
\t \t \t \t \t ghost: 'true', 
 
\t \t \t \t \t handles: 'ne, nw, se, sw', 
 
\t \t \t \t \t maxHeight: 200, 
 
\t \t \t \t \t maxWidth: 200, 
 
\t \t \t \t \t minHeight: 30, 
 
\t \t \t \t \t minWidth: 30 
 
       }); 
 
      } 
 
     } 
 
    }); 
 
    $(".draggable").draggable({ 
 
     helper: 'clone', 
 
\t \t revert:"invalid", 
 
\t \t scroll: false 
 
    }); 
 
    });

#icon_menu { 
 
\t width: 200px; 
 
\t height: auto; 
 
\t float: right; 
 
} 
 

 
#icon_menu li { 
 
\t width: 45px; 
 
\t height: 45px; 
 
\t position: relative; 
 
} 
 

 
.draggable { 
 
\t width: 45px; 
 
\t height: 45px; 
 
\t border-radius: 50%; 
 
\t background: rgba(127, 214, 236, 0.5); 
 
} 
 

 
.droppable { 
 
\t width: 200px; 
 
\t height: 100px; 
 
    border: 1px solid #000000; 
 
    float: left; 
 
} 
 

 
draggable.ui-resizable:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t top: -5px; 
 
\t right: -5px; 
 
\t font-size: .7em; 
 
\t background-color: #5f6a72; 
 
\t color: #ffffff; 
 
\t width: 20px; 
 
\t height: 20px; 
 
\t text-align: center; 
 
\t line-height: 20px; 
 
\t border-radius: 50%; 
 
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<ul id="icon_menu"> 
 
    <li class="draggable"></li> 
 
</ul>

Answer 1

您必须jQueryUI的库包括在内，使投掷的（）和拖动（）工作。你已经做了之后，有一个方法停止，当resize事件完成时调用，像这样：

$element.resizable({ 
    handles: 'e', 
    ghost: true, 
    delay: 200, 
    helper: "overmoused", 
    minWidth: 20, 
    start: function(e, ui) {}, 
    resize: function() {}, 
    stop: function(e, ui) { 
    console.log(ui.originalSize.width, ui.size.width) 
    } 
});