javascript - 如何在每个组件上激活可调整大小的事件(一个接一个)

这是我的Codepen链接：resizable event

我正在使用可调整大小的Jquery UI，工作正常，但现在我希望每个块上的可调整大小事件仅一个接一个地活动，如果单击另一个块，则先前块上的可调整大小事件将被销毁，我已经尝试过.each函数，但是不起作用。

当我尝试单击除div以外的屏幕上的任意位置时破坏可调整大小的事件时，同样的事情，我得到了错误：无法在初始化之前调用可调整大小的方法。尝试将方法称为“销毁”。

最佳答案

单击某个组件后，可调整大小，您应该通过添加一个类将其标记为可调整大小。喜欢：

https://codepen.io/ducfilan/pen/jGPwop

$(document).on("click", ".component-items", function () {
    $('.processed-resizeable').resizable("destroy");
    $('.processed-resizeable').removeClass("processed-resizeable");

    $(this).resizable();
    $(this).addClass('processed-resizeable');

    $(this).draggable({
      start: function (event, ui) {
        $(this).resizable("destroy");
      }
    });
});

.component-list {
  border:1px solid #343434;
  margin-top:50px;
  padding:5px 20px;
  height:300px;
  position: relative;
}

.component-items {
  cursor:pointer;
  position: absolute;
}

.ui-resizable {
  border:1px solid #d3d3d3;
}

#items-1 {
  top:10px;
  left:500px;
}
#items-2 {
  bottom:100px;
  left:15px;
}
#items-3 {
  top:100px;
  right:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="component-list">
        <div class="component-items" id="items-1">
          <h3>Block 1</h3>
        </div>
        <div class="component-items" id="items-2">
          <h3>Block 2</h3>
        </div>
        <div class="component-items" id="items-3">
          <h3>Block 3</h3>
        </div>
      </div>
    </div>
  </div>
</div>