Question

以下是我的Codepen链接：resizable event

我正在使用Jquery UI可调整大小，事情工作正常但现在我想要逐个活动的每个块上的可调整大小事件，如果你点击另一个块，前一个块上的可调整大小的事件将被破坏，我已经尝试过.each函数，但它没有用。

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

Answer 1

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

$(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>

如何在每个组件上激活可调整大小的事件（逐个）

1 个答案: