jQuery UI Resizable + Draggable: 掉落时消失

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

我不确定为什么，但是在你的 img 上调用 .resizable() 会导致创建一个 div.ui-wrapper 作为它的父级，而这个新的 div 有一个宽度和高度为 0。解决方案是在 new_field 上调用 .resizable() 而不是在其内部的 img：

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

然后，为了 grow/shrink 您的 img 作为其父级 div 调整大小，添加一个事件侦听器：

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

我在 Chrome 和 Firefox Linux 上工作。

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

jQuery UI Resizable + Draggable: 掉落时消失

jQuery UI Resizable + Draggable: disappearing on drop

drag-and-drop

jquery-ui

jquery-resizable