2

我试图允许将图像拖放到容器中并启用调整大小，但是，当拖放它时它会消失，直到拖动句柄。我在控制台中没有错误。

这似乎是 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>
4

1 回答 1

3

我不知道为什么，但是调用.resizable()你img会导致 adiv.ui-wrapper被创建为其父级，并且这个 newdiv的宽度和高度为 0。解决方案是调用.resizable()它new_field而不是img它的内部：

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

img然后，要在调整其父级大小时增大/缩小您div的大小，请添加一个事件侦听器：

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/

于 2015-10-15T16:59:20.033 回答