2011-12-22 89 views
1

我在容器div中动态添加img标签。创建IMG时,我添加了2类可拖动和可调整大小,然后附加到容器。所以我能够拖动但无法调整大小。什么可能是这个问题?图像可拖动但不能调整大小

下面是创建img标签

var img = document.createElement('img'); 
$(img).attr("id", "dyndiv" + count); 
$(img).attr("width", 40); 
$(img).attr("height", 100); 
$(img).attr("src", 'Uploads/' + window.frames['ifrm'].document.getElementById('dvFileName').innerHTML); 

var $ctrl = $(img).addClass("draggable resizable ui-widget-content") 
    .draggable({ 
     containment: '#containment-wrapper', 
     cursor: 'move', 
     snap: '#containment-wrapper' 
    }) 
    .resizable({ 
     aspectRatio:true, 
     containment: '#containment-wrapper' 
    }); 

objid = "dyndiv" + count; 
count++; 

$(img).css("margin-top", Math.ceil(140/2) + 'px'); 
$(img).css("margin-left", Math.ceil(60/2) + 'px'); 
$(img).css({ 
    'top':20, 
    'left':30, 
    'zindex':400 + count 
});         
$("#containment-wrapper").append($ctrl); 

这是改变的代码由@Andrew惠特克建议,但它仍然是行不通的好心帮助我的代码..

  var $wrap_div = $("<div></div>", { 'id' : "dyndiv_img" + count }) ; 
      $wrap_div.addClass("wrapper"); 
      $wrap_div.resizable({ containment: '#containment-wrapper'}); 

     var img_clip = document.createElement('img'); 

                    $(img_clip).attr("id", "dyndiv" + count); 
                    $(img_clip).attr("src", current_clip) ;                   
                    var $ctrl = $(img_clip).addClass("draggable ui-resizable ui-widget-content").draggable({ containment: '#containment-wrapper', cursor: 'move',delay: 200,distance: 30, opacity: 0.35}).wrap($wrap_div); 
                    objid = "dyndiv" + count ; 
                    count++; 

                    $(img_clip).css({'top':20,'left':30}); 
                     //($ctrl).resizable({ containment: '#containment-wrapper'}) ;                 
                    $("#containment-wrapper").append($ctrl); 
                    $('#' + objid).position({ 
                    of: $("#containment-wrapper"), 
                    my: "center" + " " + "center", 
                    at: "center" + " " + "center" 

                    }); 
+0

我会尝试包裹'img'在'div'和应用可调整大小了这一点。有时候可调整大小的图像播放效果不佳。 – 2011-12-22 15:31:34

+0

我试图包装,但dosent工作对我来说。你能给我一个例子吗?如何做到这一点可能是我做错了。 – 2011-12-22 16:15:23

+0

什么是..的计数变量? – 2011-12-25 11:36:05

回答

1

最后我找到了这个方法。 img标签的大小调整和拖拽功能不需要包装div。

   $(img_tag).resizable().parent().draggable(); 

这适用于我。

:)

相关问题