Question

我制作了一个简单的Web应用程序，允许您将动态div添加到容器div。

您可以在此处查看该应用的效果：

调整大小之前

正如您所看到的，当您点击链接＆＃34; Image＆＃34;在左侧菜单中，它在div容器中添加一个带有黑色背景的新div。

通过这种方式添加的动态divs可以通过jQuery使用jQuery ui draggable和resizable方法进行拖动和调整大小。

可拖动功能运行良好，但不是可调整大小的功能。似乎div是dependents，当你尝试调整它时，它取决于其他动态div的大小。

以下是我试图解释的例子：

调整大小后

就像你可以看到的那样，我试图调整div2的大小，但是因为我首先添加了div1，所以div1也被调整了大小。

我想让所有div独立，所以我可以调整它，即使它与另一个div重叠。

这是我的代码：

＆＃13;

    public RobotoTextView(Context context) {
        super(context);
        if (isInEditMode()) return;
        parseAttributes(null);
    }

    public RobotoTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (isInEditMode()) return;
        parseAttributes(attrs);
    }

    public RobotoTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (isInEditMode()) return;
        parseAttributes(attrs);
    }

    private void parseAttributes(AttributeSet attrs) {
        int typeface;
        if (attrs == null) { //Not created from xml
            typeface = Roboto.ROBOTO_REGULAR;
        } else {
            TypedArray values = getContext().obtainStyledAttributes(attrs, R.styleable.RobotoTextView);
            typeface = values.getInt(R.styleable.RobotoTextView_typeface, Roboto.ROBOTO_REGULAR);
            values.recycle();
        }
        setTypeface(getRoboto(typeface));
    }

    public void setRobotoTypeface(int typeface) {
        setTypeface(getRoboto(typeface));
    }

    private Typeface getRoboto(int typeface) {
        return getRoboto(getContext(), typeface);
    }

    public static Typeface getRoboto(Context context, int typeface) {
        switch (typeface) {
            case Roboto.ROBOTO_BLACK:
                if (Roboto.sRobotoBlack == null) {
                    Roboto.sRobotoBlack = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Black.ttf");
                }
                return Roboto.sRobotoBlack;
            case Roboto.ROBOTO_BLACK_ITALIC:
                if (Roboto.sRobotoBlackItalic == null) {
                    Roboto.sRobotoBlackItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-BlackItalic.ttf");
                }
                return Roboto.sRobotoBlackItalic;
            case Roboto.ROBOTO_BOLD:
                if (Roboto.sRobotoBold == null) {
                    Roboto.sRobotoBold = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Bold.ttf");
                }
                return Roboto.sRobotoBold;
            case Roboto.ROBOTO_BOLD_CONDENSED:
                if (Roboto.sRobotoBoldCondensed == null) {
                    Roboto.sRobotoBoldCondensed = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-BoldCondensed.ttf");
                }
                return Roboto.sRobotoBoldCondensed;
            case Roboto.ROBOTO_BOLD_CONDENSED_ITALIC:
                if (Roboto.sRobotoBoldCondensedItalic == null) {
                    Roboto.sRobotoBoldCondensedItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-BoldCondensedItalic.ttf");
                }
                return Roboto.sRobotoBoldCondensedItalic;
            case Roboto.ROBOTO_BOLD_ITALIC:
                if (Roboto.sRobotoBoldItalic == null) {
                    Roboto.sRobotoBoldItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-BoldItalic.ttf");
                }
                return Roboto.sRobotoBoldItalic;
            case Roboto.ROBOTO_CONDENSED:
                if (Roboto.sRobotoCondensed == null) {
                    Roboto.sRobotoCondensed = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Condensed.ttf");
                }
                return Roboto.sRobotoCondensed;
            case Roboto.ROBOTO_CONDENSED_ITALIC:
                if (Roboto.sRobotoCondensedItalic == null) {
                    Roboto.sRobotoCondensedItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-CondensedItalic.ttf");
                }
                return Roboto.sRobotoCondensedItalic;
            case Roboto.ROBOTO_ITALIC:
                if (Roboto.sRobotoItalic == null) {
                    Roboto.sRobotoItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Italic.ttf");
                }
                return Roboto.sRobotoItalic;
            case Roboto.ROBOTO_LIGHT:
                if (Roboto.sRobotoLight == null) {
                    Roboto.sRobotoLight = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Light.ttf");
                }
                return Roboto.sRobotoLight;
            case Roboto.ROBOTO_LIGHT_ITALIC:
                if (Roboto.sRobotoLightItalic == null) {
                    Roboto.sRobotoLightItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-LightItalic.ttf");
                }
                return Roboto.sRobotoLightItalic;
            case Roboto.ROBOTO_MEDIUM:
                if (Roboto.sRobotoMedium == null) {
                    Roboto.sRobotoMedium = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Medium.ttf");
                }
                return Roboto.sRobotoMedium;
            case Roboto.ROBOTO_MEDIUM_ITALIC:
                if (Roboto.sRobotoMediumItalic == null) {
                    Roboto.sRobotoMediumItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-MediumItalic.ttf");
                }
                return Roboto.sRobotoMediumItalic;
            default:
            case Roboto.ROBOTO_REGULAR:
                if (Roboto.sRobotoRegular == null) {
                    Roboto.sRobotoRegular = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Regular.ttf");
                }
                return Roboto.sRobotoRegular;
            case Roboto.ROBOTO_THIN:
                if (Roboto.sRobotoThin == null) {
                    Roboto.sRobotoThin = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Thin.ttf");
                }
                return Roboto.sRobotoThin;
            case Roboto.ROBOTO_THIN_ITALIC:
                if (Roboto.sRobotoThinItalic == null) {
                    Roboto.sRobotoThinItalic = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-ThinItalic.ttf");
                }
                return Roboto.sRobotoThinItalic;
        }
    }

    public static class Roboto {
        public static final int ROBOTO_BLACK = 0;
        public static final int ROBOTO_BLACK_ITALIC = 1;
        public static final int ROBOTO_BOLD = 2;
        public static final int ROBOTO_BOLD_ITALIC = 3;
        public static final int ROBOTO_BOLD_CONDENSED = 4;
        public static final int ROBOTO_BOLD_CONDENSED_ITALIC = 5;
        public static final int ROBOTO_CONDENSED = 6;
        public static final int ROBOTO_CONDENSED_ITALIC = 7;
        public static final int ROBOTO_ITALIC = 8;
        public static final int ROBOTO_LIGHT = 9;
        public static final int ROBOTO_LIGHT_ITALIC = 10;
        public static final int ROBOTO_MEDIUM = 11;
        public static final int ROBOTO_MEDIUM_ITALIC = 12;
        public static final int ROBOTO_REGULAR = 13;
        public static final int ROBOTO_THIN = 14;
        public static final int ROBOTO_THIN_ITALIC = 15;

        private static Typeface sRobotoBlack;
        private static Typeface sRobotoBlackItalic;
        private static Typeface sRobotoBold;
        private static Typeface sRobotoBoldItalic;
        private static Typeface sRobotoBoldCondensed;
        private static Typeface sRobotoBoldCondensedItalic;
        private static Typeface sRobotoCondensed;
        private static Typeface sRobotoCondensedItalic;
        private static Typeface sRobotoItalic;
        private static Typeface sRobotoLight;
        private static Typeface sRobotoLightItalic;
        private static Typeface sRobotoMedium;
        private static Typeface sRobotoMediumItalic;
        private static Typeface sRobotoRegular;
        private static Typeface sRobotoThin;
        private static Typeface sRobotoThinItalic;
    }
}

＆＃13;

var bg = document.getElementById('bg');
bg.className = "centrer";

var ajoutImg = document.getElementById('ajoutImage');

var initDiagonal;
var initFontSize;

ajoutImg.onclick = function () {

  var moveDiv = document.createElement("div");
  moveDiv.className = 'encadrer';
  var titre = document.createElement("p");
  var para = document.createElement("p");
  titre.textContent = "Titre";
  titre.className = 'centrerTitre';
  moveDiv.appendChild(titre);
  para.textContent = prompt("Texte de l'image :");
  para.className = 'centrerPara';
  moveDiv.appendChild(para);
  bg.appendChild(moveDiv);
  $(function () {
    $(".encadrer")
    .draggable({ containment: "parent" })
    .resizable({
      containment: "parent",
      handles: "all"
    });
  });
};

＆＃13;

 .centrer {
   display: block;
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 640px;
   width: 360px;
   background-color: #000000;
 }

.menu {
  border: 1px solid black;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}

.encadrer {
  display: table-cell;
  border: 1px solid white;
  vertical-align: middle;
}

.centrerTitre {
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.centrerPara {
  font-size: 16;
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

/*----- Resizable ------*/
.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0px;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0px;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0px;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0px;
  height: 100%;
}

.ui-resizable-nw {
  cursor: nw-resize;
  height: 7px;
  width: 7px;
  top: -5px;
  left: -5px;
}

.ui-resizable-se {
  cursor: se-resize;
  height: 7px;
  width: 7px;
  right: -5px;
  bottom: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  height: 7px;
  width: 7px;
  top: -5px;
  right: -5px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  height: 7px;
  width: 7px;
  left: -5px;
  bottom: -5px;
}
/*----------------------*/

＆＃13;

我真的不知道如何使用代码段系统，但您可以通过这种方式查看代码：p

抱歉英文和var名称不好。

Answer 1

我做了一些修复问题的css和js更改：

将$(".encadrer")替换为$(moveDiv)因为您不想在每次用户添加时调用所有元素（.encadrer）的插件一个图像。
主要问题是图片的position relative我将其更改为absolut。
我删除了display:table-cell和vertical-align:middle。如果您想使图像居中，则应使用How to center absolute element in div。

＆＃13;

var bg = document.getElementById('bg');
bg.className = "centrer";

var ajoutImg = document.getElementById('ajoutImage');

var initDiagonal;
var initFontSize;

ajoutImg.onclick = function () {
  //var moveDiv = document.createElement("div");
  //moveDiv.className = 'encadrer';
  //var titre = document.createElement("p");
  //var para = document.createElement("p");
  //titre.textContent = "Titre";
  //titre.className = 'centrerTitre';
  //moveDiv.appendChild(titre);
  //para.className = 'centrerPara';
  //moveDiv.appendChild(para);
  
  var name = prompt("Texte de l'image :");
  var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
  
  $(bg).append(container);
  
    container
    .draggable({ containment: "parent" })
    .resizable({
      containment: "parent",
      handles: "all"
    });
};

＆＃13;

.centrer {
   display: block;
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 640px;
   width: 360px;
   background-color: #000000;
 }

.menu {
  border: 1px solid black;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}

.encadrer {
  /*display: table-cell;
  vertical-align: middle;*/
  border: 1px solid white;
  position:absolute !important;
}

.centrerTitre {
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.centrerPara {
  font-size: 16;
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  text-align:center;
  width:100%;
}

.encadrer:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />

<div id="menu" class="menu">
    <h3>Ajouter des éléments</h3>
    <ul>
        <li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
    </ul>
</div>
<div id="bg"></div>

＆＃13;

<强>更新

要将内容中心放在您需要的.encadrer内：

使用div
按照tutorial转到：垂直 - ＆gt;是内联还是内联*元素（如文本或链接）？ - ＆gt;这是多行吗？ - ＆GT;看第二个演示。您可以看到最终结果here

JQuery Resizable：如何使multiples divs独立调整大小

1 个答案: