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

Question

这是我的 Codepen 链接:resizable event

我正在使用可调整大小的 Jquery UI，一切正常，但现在我希望每个 block 上的可调整大小事件只能一个接一个地激活，如果单击另一个 block ，前一个 block 上的可调整大小事件将被销毁，我已经尝试了 .each 函数，但它不起作用。

当我尝试在屏幕上除 div 以外的任何地方单击时销毁可调整大小的事件时，我得到了错误:无法在初始化之前调用可调整大小的方法；试图调用方法“销毁”。

Answer 1

当一个组件被点击时，可以调整大小，您应该通过添加一个类将其标记为可调整大小。喜欢:

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>