【问题标题】:Image is draggable but not resizing图像可拖动但不能调整大小
【发布时间】:2011-12-22 15:04:55
【问题描述】:

我在容器 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 Whitaker 建议的更改代码,但仍然无法正常工作,请帮我解决这个问题..

          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"

                                                                    });

【问题讨论】:

  • 我会尝试将img 包装在div 中并对其应用可调整大小。可调整大小有时不能很好地处理图像。
  • 我也尝试过包装,但对我有用。你能举个例子吗?可能是我做错了。
  • count 变量的用途是什么?
  • 这有助于创建动态 id。当创建新的 img 时,我将其添加为 id 并以 1 递增。

标签: jquery jquery-resizable


【解决方案1】:

我终于找到了方法。 img 标签的调整大小和拖动功能不需要包装 div。

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

这对我有用。

:)

【讨论】:

    猜你喜欢
    • 2021-11-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-15
    • 2017-05-15
    • 1970-01-01
    相关资源
    最近更新 更多