Question

单击重复按钮后，我正在动态创建div元素。 div可水平拖动和调整大小。每次我创建一个新的div时，通过单击重复项，新的div都是可拖动的。但是通过调整大小，可以观察到异常行为。行为是直到最后一个div的所有div都具有可调整大小的功能，但最新（最后）没有被调整大小。我提到了这里给出的解决方案，

Apply jQueryUI Resizable widget to dynamically created elements。他们正在使用：last和after（）方法。

我不知道如何使用它。

以下是我的代码，

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    <script
    src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
    integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
    crossorigin="anonymous"></script>
    <script type="text/javascript">
        var bar_id = 1;
        $(document).ready(function(){
            $(".action").draggable({cursor:"move",containment:"#limits"});
            $(".action").resizable({handles:"e,w",maxWidth:1300,maxHeight:46,minWidth:100,minHeight:46});

            $(document).on('click',".duplicate_btn",function(){
                bar_id += 1;                
                var duplicate_bar = $(this).parent().clone();
                duplicate_bar.attr("id","action_"+bar_id);
                duplicate_bar.find(".duplicate_btn").attr("id","duplicate_btn_"+bar_id);                         
                $("#limits").append(duplicate_bar);
                $(".action").draggable({cursor:"move",containment:"#limits"});                    
                $(".action").resizable({handles:"e,w",maxWidth:1300,maxHeight:46,minWidth:100,minHeight:46});
            });

        });
    </script>
    <style type="text/css">
        .action{
            background-color: #aaa;
            height: 46px;
            width: 200px;
            float:left;
            border:2px solid black;
            position:absolute;
            /*for items inside div*/
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #limits{
            background-color: lavender;
            height: 50px;
            width: 1300px;
        }           
    </style>
</head>
<body>
<div id="limits">
    <div id="action_1" class="action">
        <button id="duplicate_btn_1" class="duplicate_btn">Duplicate</button>
    </div>
</div>
</body>
</html>

请帮助您解决问题。预先谢谢！！

Answer 1

如果您在clone()元素之后检查DOM检查器，您会发现它还复制了.ui-resizable-handle元素，这些元素在draggable()和{{ 1}}。

这是问题的原因。您需要先删除这些元素，然后才能在新元素上定义可拖动和可调整大小的元素。还要注意，您可以直接在新实例上调用这些方法，而不必在resizable()的所有实例上重新定义插件。试试这个：

.action

var bar_id = 1;
$(document).ready(function() {
  defineDragResize($('.action'));

  $(document).on('click', ".duplicate_btn", function() {
    bar_id += 1;
    var $duplicate_bar = $(this).parent().clone().appendTo('#limits')
    $duplicate_bar.find('div').remove();
    defineDragResize($duplicate_bar);
  });

  function defineDragResize($el) {
    $el.draggable({
      cursor: "move",
      containment: "#limits"
    }).resizable({
      handles: "e,w",
      maxWidth: 1300,
      maxHeight: 46,
      minWidth: 100,
      minHeight: 46
    });
  }
});

.action {
  background-color: #aaa;
  height: 46px;
  width: 200px;
  float: left;
  border: 2px solid black;
  position: absolute;
  /*for items inside div*/
  display: flex;
  align-items: center;
  justify-content: center;
}

#limits {
  background-color: lavender;
  height: 50px;
  width: 1300px;
}

#limits {
  background-color: lavender;
  height: 50px;
  width: 1300px;
}

要注意的一件事是，我删除了动态<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script> <div id="limits"> <div class="action"> <button class="duplicate_btn">Duplicate</button> </div> </div>逻辑。这是一种反模式，不应使用。使用公共类和DOM遍历。

jQuery resizable（）用于动态元素，直到最后一个元素都有效，但不支持最后一个元素

1 个答案: