Question

请检查下面的代码。我正在使用JQuery UI for Resizable。我在图像上有边距，然后我在图像点击上应用JQuery可调整大小，当我在图像外部单击时我将其删除。一切正常，但除了这种行为是从图像中删除边距。有没有办法保留保证金？

HTML

<img src="http://4.bp.blogspot.com/-DQ69szlhi38/UCJwZqNfcJI/AAAAAAAAAcY/6gsenl0Mwr8/s72-c/google.jpg" style="margin:20px;"/>

JQuery的

$('document').ready(function(){
    $('img').click(function(){
        $(this).resizable();
    });
});
$(document).mouseup(function (e) {
    var container = $('img');
    if ((!container.is(e.target)
        && container.has(e.target).length === 0)) {
        if ($('img').hasClass('ui-resizable')) {
            $('img').resizable('destroy');  
        }
    }
});

请检查jsfiddle http://jsfiddle.net/wgdvza8j/3/

中的代码

Answer 1

jQuery UI resizible为您的图片设置内联CSS样式，包括margin: 0。这意味着为了超出此边距，您必须设置这样的CSS规则（!important是使规则更具体的内联样式的方法）：

img {
    margin: 20px !important;
}

但是我不确定为什么你需要这个保证金。

演示：http://jsfiddle.net/wgdvza8j/4/

Answer 2

我想出了这个问题。我现在从ui-wrapper中拉出边距，然后应用图像。请检查我的代码js小提琴 http://jsfiddle.net/wgdvza8j/6/

<强> HTML

<强> JQuery的

$('document').ready(function(){
    var imgMarginTop,imgMarginRight,imgMarginBottom,imgMarginLeft;
    $('img').click(function(){
        $(this).resizable();
    });
});
$(document).mouseup(function (e) {
    var container = $('img');
    if ((!container.is(e.target)
        && container.has(e.target).length === 0)) {
        if ($('img').hasClass('ui-resizable')) {
            imgMarginTop = $('.ui-wrapper').css('marginTop');
            imgMarginRight = $('.ui-wrapper').css('marginRight');
            imgMarginBottom = $('.ui-wrapper').css('marginBottom');
            imgMarginLeft = $('.ui-wrapper').css('marginLeft');
            $('img').css({'marginTop':imgMarginTop,'marginRight':imgMarginRight,'marginBottom':imgMarginBottom,'marginLeft':imgMarginLeft});
            $('img').resizable('destroy');  
        }    
    }
});

Jquery UI - jquery可调整大小的边距问题

2 个答案: