javascript - 调整 droppable 的大小在 Mozilla 中不起作用

Question

我正在尝试使一个 div 可放置并可调整大小，它在 Chrome 中运行良好，但在 Firefox 中却不行。

这是我的 jsFiddle，请在 Firefox 中打开它:
MY DEMO

我的代码:

// main drop function for work area
$('#img-drop-container').droppable({
  accept: '.img-drop',
  drop: function(event, ui) {
    var $clone = ui.helper.clone();
    if (!$clone.is('.inside-drop-zone')) {
      $(this).append($clone.addClass('inside-drop-zone').draggable({
        containment: '#img-drop-container',
        stack: '.inside-drop-zone',
        zIndex: 100,
        cursor: 'pointer'
      }));
      $clone.removeClass('img-drop');

      // resize image
      //   $('.inside-drop-zone').resizable({
      //   aspectRatio: true,
      //   handles: 'ne, se, sw, nw'
      //   });
    }
  }
});

//clone the draggable items
$('li .img-drop').draggable({
  helper: 'clone',
  cursor: 'pointer',
});

ul {
    list-style:none;
}
#img-drop-container {
    background-color:#d8d8d8;
    border: 1px solid #9C9898;
    height:557px;
    width:99.9%;
}
.img-drop {
    height: 120px;
    width: auto;
}
#trash {
    float:left;
    margin-left:20px;
    margin-top:20px;
}
#trash {
    width:140px;
    height:140px;
    background-repeat: no-repeat;
    background-position:center center;
    z-index:2;
}
img {
    width:auto;
    height:auto;
}
.store-thumb {
    height: 50px;
    width: 50px;
}
#imgbg {
    float: right;
    left: -2%;
    position: relative;
    top: 4%;
}
.column {
    margin-top: -21%;
    margin-left:55%;
}
.resizable {
    width: 100px;
    border: 1px solid #bb0000;
}
.resizable img {
    width: 100%;
}
.ui-resizable-handle {
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;
    z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<ul id="carousel" class="elastislide-list">
  <li>
    <div class="img-drop">
      <div style='resize: horizontal; height:20px; width: 100px; overflow: auto; border: solid gray 1px;float:left;  background-color: green;'></div>
    </div>
  </li>
</ul>
<div id="img-drop-container"></div>

Answer 1

fiddle :http://jsfiddle.net/c38WX/40/

HTML: li中只有一个div

<div class="img-drop" style='height:20px; width: 100px; overflow: hidden; border: solid gray 1px;float:left;  background-color: green;'></div>

JQ:

添加可调整大小的小部件

$('li .img-drop').draggable({
        helper: 'clone', 
       cursor: 'pointer',
    }).resizable({ 
        handles: "e" ,
        autoHide: true
    });