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) 
    } 
});