Question

我正在玩一些 JavaScript 可拖动对象。我正在努力用 <li> 中的标签调整每个框的大小如果我使用 <ul id="#b0x1"><li>b0x1</ul> 我成功地调整了每个框的大小，但它们不再同步工作。有关如何解决此问题的任何建议？

  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

#sortable { list-style-type: none; margin: 0; padding: 0; width: 120%; height: 100% }
#sortable li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box1 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box2 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box3 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box4 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box5 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
<ul id="sortable">
<li id="box1" class="ui-state-default">b0x1</li>
<li id="box1" class="ui-state-default">b0x2</li>
<li id="box1" class="ui-state-default">b0x3</li>
<li id="box1" class="ui-state-default">b0x4</li>
<li id="box1" class="ui-state-default">b0x5</li>
</ul>

Answer 1

当您使用 jquery-ui 时，您可以使用 Resizable 根据需要调整所有框的大小，请检查以下内容：

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
    $( "#sortable li" ).resizable();
  } );

#sortable { list-style-type: none; margin: 0; padding: 0; width: 120%; height: 100% }
#sortable li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box1 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box2 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box3 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box4 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
#box5 li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
<ul id="sortable">
<li id="b0x1" class="ui-state-default">b0x1</li>
<li id="box1" class="ui-state-default">b0x2</li>
<li id="box1" class="ui-state-default">b0x3</li>
<li id="box1" class="ui-state-default">b0x4</li>
<li id="box1" class="ui-state-default">b0x5</li>
</ul>

编辑：似乎 PO 不想让盒子动态调整大小

当您放置 #box1 li 时，这意味着您希望在包含 li id 的容器中设置 #box1 的样式，这在您的情况下是错误的，因此您必须将 { {1}}（这意味着您要为包含 ID li#box1 的 li 设置样式）

box1

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

#sortable { list-style-type: none; margin: 0; padding: 0; width: 120%; height: 100% }
#sortable li { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
li#box1 { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size:1em; text-align: center; }
li#box2 { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
li#box3 { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
li#box4 { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }
li#box5 { margin: 10px 10px 10px 0; padding: 1px; float: left; width: 300px; height: 290px; font-size:1em; text-align: center; }

看看Resizable Documentation。

JavaScript 和 CSS 可拖动框调整大小

1 个答案: