Question

我想创建一个Div容器，用户可以在其中添加可以被拖动的Boxes（也是div），但不要重叠。所以我开始使用容器：

<div id="image_container"></div>

之后我想改变图像。所以总是给出宽度，例如800px，但高度应该是自动的。我试过以下：

div#image_container{
    position: relative;
    background: url('http://www.locationscout.net/public/images/2015-02/externsteine-germany_l.jpeg');
    width: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
}

但无法得到结果。你会怎么做？由于整个应用程序在没有JavaScript的情况下无法工作，我可以用它调整高度。你觉得怎么样？因此，如果图像加载，则启动该功能。

容器完成后，用户应该可以在其中添加框。他应该能够输入高度和宽度，最多可以添加4个盒子，而不是更多。但是尺寸应该可以通过滑块调节，并保持相对于所有其他拳击手。所以...如果有2个盒子，一个400x400和另一个200x100，他可以用滑块调整尺寸，例如200x200 / 100x50,800x800 / 400x100，但更小的步骤如480x480 / 240x120。可以使用此滑块完成：

<input type="range" min="0" value="0" max="100" step="1">

你会怎么做？我会通过

给出格式

然后应将盒子添加到容器中并且它们是可拖动的，但不要重叠。类似于this但更好的代码。我写的那个很糟糕。 JS是用插件完成的，效率不高。你能推荐什么？

问候 C144

图像容器拖动＆＃39; N＆＃39;不重叠

0 个答案: