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 に答える