Javascript jQuery Resizeble（）用于动态元素正常工作到倒数第二个元素，但不用于倒数第二个元素_Javascript_Jquery_Html_Css

Javascript jQuery Resizeble（）用于动态元素正常工作到倒数第二个元素，但不用于倒数第二个元素

javascript jquery html css

Javascript jQuery Resizeble（）用于动态元素正常工作到倒数第二个元素，但不用于倒数第二个元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在动态地创建div元素，单击复制按钮。div可以拖动，并且可以水平调整大小。每次我创建一个新的div时，通过单击duplicate，新的div都是可拖动的。但在可调整大小的情况下，观察到一种不寻常的行为。行为是所有div正常运行第二个最后一个div获得可调整大小的功能，但是最近的（最后一个）没有获得可调整大小的功能。我引用了这里给出的解决方案。他们正在使用：last和after（）方法我不知道如何在我的案例中使用它下面是我的代码 <!DOCTYPE html> <ht

我正在动态地创建div元素，单击复制按钮。div可以拖动，并且可以水平调整大小。每次我创建一个新的div时，通过单击duplicate，新的div都是可拖动的。但在可调整大小的情况下，观察到一种不寻常的行为。行为是所有div正常运行第二个最后一个div获得可调整大小的功能，但是最近的（最后一个）没有获得可调整大小的功能。我引用了这里给出的解决方案

。他们正在使用：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>


var bar_id=1；
$（文档）.ready（函数（）{
$（“.action”）.draggable（{cursor:“move”，containment:#limits}）；
$（“.action”）。可调整大小（{句柄：“e，w”，最大宽度：1300，最大高度：46，最小宽度：100，最小高度：46}）；
$（文档）.on（'click'，.duplicate_btn'，function（）{
bar_id+=1；
var duplicate_bar=$（this.parent（）.clone（）；
重复的酒吧属性（“id”、“动作”+酒吧id）；
重复条查找（“.duplicate\u btn”）.attr（“id”，“duplicate\u btn”+条id）；
$（“#限制”）。追加（重复#条）；
$（“.action”）.draggable（{cursor:“move”，containment:#limits}）；
$（“.action”）。可调整大小（{句柄：“e，w”，最大宽度：1300，最大高度：46，最小宽度：100，最小高度：46}）；
});
});
.行动{
背景色：#aaa；
高度：46px；
宽度：200px；
浮动：左；
边框：2件纯黑；
位置：绝对位置；
/*对于div内的项目*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#极限{
背景颜色：淡紫色；
高度：50px；
宽度：1300px；
}           
复制

请帮我出去。提前谢谢你

如果在

clone（）

元素之后检查DOM检查器，您将看到它还复制了

.ui resizeable handle

元素，这些元素是在对原始元素调用

draggable（）

和

resizeable（）

时添加到原始元素中的

这就是问题的原因。在新元素上定义可拖动和可调整大小之前，需要删除这些元素。还请注意，您可以直接在新实例上调用这些方法，而不是在

.action

的所有实例上重新定义插件。试试这个：

var bar\u id=1；
$（文档）.ready（函数（）{
定义地图（$（'.action'））；
$（文档）.on（'click'，.duplicate_btn'，function（）{
bar_id+=1；
var$duplicate_bar=$（this.parent（）.clone（）.appendTo（“#limits”）
$duplicate_bar.find（'div'）.remove（）；
定义图（$duplicate\u bar）；
});
函数定义的图形化（$el）{
$el.draggable({
光标：“移动”，
遏制：“限制”
}).可调整大小({
手柄：“e，w”，
最大宽度：1300，
最大高度：46，
最小宽度：100，
身高：46
});
}
});
.action{
背景色：#aaa；
高度：46px；
宽度：200px；
浮动：左；
边框：2件纯黑；
位置：绝对位置；
/*对于div内的项目*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#极限{
背景颜色：淡紫色；
高度：50px；
宽度：1300px；
}
#极限{
背景颜色：淡紫色；
高度：50px；
宽度：1300px；
}

复制
@Rory McCrossan在Dragable和Resizeble上应用相同的功能，如你所说。DragTable与以前一样正常工作，但Resizeable现在仅适用于第一个div。当我在stackoverflow中运行您的代码片段时，它显示了在最后一个div旁边显示克隆的良好行为，但当我在计算机中复制代码时，它显示克隆的div重叠在当前div上，我手动拖动。你能说出原因吗？如果没有发现问题，很难诊断。我认为你使用的CSS是不同的。.操作{背景色：#aaa；高度：46px；宽度：200px；浮动：左侧；边框：2px纯黑色；位置：绝对；/*用于div内的项目*/显示：flex；对齐项目：中心；对齐内容：中心；}限制{背景色：淡紫色；高度：50px；宽度：1300px；}这和我从你的代码中复制的CSS是一样的，我把它粘贴在上面，我用这个CSS更新了答案，效果很好。如果你不能解决这个问题，我建议你开始一个新的问题，但一定要包括所有重新创建它的代码。