droppable의 크기가 Mozilla에서 작동하지 않습니다.

Question

하나의 div를 삭제 가능하게하고 크기를 조정하려고합니다. Chrome에서는 훌륭하지만 Firefox에서는 작동하지 않습니다. 여기

내 jsFiddle가 파이어 폭스에서이 문제를여십시오입니다 :
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

바이올린 : http://jsfiddle.net/c38WX/40/

HTML :

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

JQ 리에서 하나의 사업부 :

추가 resizible 위젯

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

Answer 2

아마도하지 완벽하게 난 같은 작업 바이올린의 기능이 무엇인지 정확히 모릅니다.

JSFiddle 대신 크기를 사용

: (당신이 또한 시도처럼 보이는) 수평, 나는 크기 조정 기능을 hande하기 위해 jQuery를 UI의 크기 조절을 사용하고 있습니다. 핸들 : 'e, w'은 크기를 가로 전용으로 제한합니다.

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