Question

我通过管理信息中心在我的数据库中存储了几个resizable和draggable div标签，并在我的主网站上输出。但问题是，resizable不起作用，但我设法让draggable工作。

这是我的DOM来自数据库：

<div data-type="input" data-card="serial_no" data-title="Serial No" class="card-data card-text card-content serial_no serial_no_content ui-draggable ui-draggable-handle ui-resizable"><span>Content for Serial No</span>
  <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
</div>

注意：我在带有.card 类的div标签中将DOM包装在DOM上方

您可以看到ui-resizable-handle和ui-resizable-*类已经存在，并且在具有类名.card的包装器中输出DOM后尝试了以下内容。

$(function(){

   /**
    * Searching for .card children with the class name .ui-resizable-handle
    * and removing them
    **/
   $('.card').find('.ui-resizable-handle').each(function(i, v){
      $(v).remove();
   });


   /**
    * Iterating through .card again and making it's children draggable and resizable but this does not work.
    **/
   $('.card').children().each(function(i, v){
      if($(v).attr('data-type') == 'input'){
        $(v).draggable({containment: '.card-wrapper'}).resizable({
          handles: "n, e, s, w"
        });
      }
   });
});

执行此操作后，draggable有效但resizable没有。

请帮我解决这个问题。

提前致谢。

编辑： 这是Fiddle

Answer 1

我发现奇怪的两件事，

您正在删除子元素，之后尝试添加resizable 相同。
您同时绑定draggable和resizable。它不起作用，因为draggable的返回不是元素的一个实例。

我试图在

$(function() {

  /**
   * Iterating through .card again and making it's children draggable and resizable but this does not work.
   **/
  $('.card').children().each(function(i, v) {
    if ($(v).attr('data-type') == 'input') {
      $(v).resizable({
        handles: "n, e, s, w"
      });
      $(v).draggable({
        containment: '.card-wrapper'
      })
    }
  });
});

.card {
  outline: solid 1px #aaa;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.card .card-text {
  position: absolute;
  left: 32%;
  border: solid 1px red;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<!-- div with the class .card is not dynamic but it's content is which is coming from database and i'm using PHP & MySQL for backend -->
<div class="card">
  <div data-type="input" data-card="serial_no" data-title="Serial No" class="card-data card-text card-content serial_no serial_no_content ui-draggable ui-draggable-handle ui-resizable"><span>Content for Serial No</span>
    <div class="ui-resizable-handle ui-resizable-n">foo</div>
    <div class="ui-resizable-handle ui-resizable-e">too</div>
    <div class="ui-resizable-handle ui-resizable-s">poo</div>
    <div class="ui-resizable-handle ui-resizable-w">choo</div>
  </div>
</div>

希望这有帮助。

jQuery UI可调整大小不适用于动态元素

1 个答案: