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

这是一个工作小提琴，也许并不完美，因为我不确定功能应该是什么。

<强> JSFiddle

我没有使用resize：horizontal，而是使用jQuery UI调整大小（因为看起来你也尝试过）来处理resize功能。 处理：＆＃39; e，w＆＃39; 是将调整大小限制为仅水平。

// resize image
$('.resize_box').resizable({
    handles: 'e, w'
});

Answer 2

小提琴：http://jsfiddle.net/c38WX/40/

<强> HTML：李只有一个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
    });

在Dropzable上调整大小在Mozilla中不起作用

2 个答案: