Question

我正在制作10个可拖动和可调整大小的盒子，但只有我的第一个盒子可以拖动并可调整大小。

如何让所有盒子都可以拖动并调整大小？

代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
    #resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#resizable" ).draggable().resizable();
    });
</script>

@for($i=0;$i<10;$i++)
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">User {{ $i }}</h3>
    </div>
@endfor

Answer 1

使用class而不是id

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $(document).ready(function(){
    $( ".resizable").each(function(){
      $(this).draggable().resizable();
    })
  });
  </script>

  @for($i=0;$i<10;$i++)
<div id="resizable{{ $i }}" class="resizable ui-widget-content">
  <h3 class="ui-widget-header">User {{ $i }}</h3>
</div>
  @endfor

动态创建中的Jquery UI可拖动和resizeabl问题

代码：

1 个答案: