Question

我正在尝试将图像放入容器中并启用调整大小，但是，当它被删除时，它会消失，直到拖动手柄。我在控制台中没有错误。

这是否是CSS生成的问题？我试过改变z-index但是没有用。

有没有人对这会导致什么有任何建议？

问题在这里看到： http://jsfiddle.net/xBB5x/9662/

JS：

$(document).ready(function(){
    $(".droppableShape").draggable({
        helper:'clone'
    });


    $(".canvas").droppable({
        accept: ".droppableShape",
        tolerance: 'fit',
        drop: function(event,ui){

            // Set variables
            var new_field = $(ui.helper).clone().removeClass('droppableShape');
            var droppable_page = $(this);
            var droppableOffset = $(this).offset();

            // Check the tool type
            switch(new_field.attr('class').split(" ")[0]) {
                case "strokeTool":
                    new_field.css('top', ui.position.top - droppableOffset.top);
                    new_field.css('left', ui.position.left - droppableOffset.left);
                    break;
                default:
                    console.log("A class type was not detected");
            }

            new_field.find( "img" ).resizable({
                maxHeight: 47,
                maxWidth: 151,
                minHeight: 18,
                minWidth: 60,
                aspectRatio: 151 / 47 
             });

            // Set Draggable Options
            new_field.draggable({
                containment: droppable_page,
            });

            // Add to drop area
            $(this).append(new_field);
        }
    });
});

HTML：

<div class="container">      
    <div id="toolbar">
       Tools:
       <div class="droppableShape strokeTool">
           <img width="125" src="http://41.media.tumblr.com/75b247a33fee823ac735d86270cfa813/tumblr_mp5loljbFz1s56exfo1_500.png" />
       </div>

    </div>

    <div id="canvas_area">
        <div class="canvas ui-droppable" id="page1"><img src="http://www.astrologychanneletc.com/wp-content/uploads/2014/09/blankcanvas.jpg"></div>
    </div>
</div>

Answer 1

我不确定原因，但是在.resizable()上调用img会导致div.ui-wrapper被创建为其父级，而这个新的div有一个宽度，高度为0.解决方案是在.resizable()上调用new_field而不是img内的new_field.resizable({ maxHeight: 47, maxWidth: 151, minHeight: 18, minWidth: 60, aspectRatio: 151 / 47 });：

img

然后，为了调整其父div的{{1}}的大小/缩小，请添加一个事件监听器：

new_field.on("resize", function(rEvent, rUI) {
  new_field.find("img").css({
    "width": rUI.size.width,
    "height": rUI.size.height
  });
});

适用于Linux上的Chrome和Firefox。

http://jsfiddle.net/xBB5x/9663/

jQuery UI Resizable + Draggable：在drop上消失

1 个答案: