Question

对我来说这是一个复杂的问题。这就是我想要的：

我设计了一个可拖动的div，并且页面上已有1个实例可供拖动。当用户拖动它时，我想动态创建它的新实例。我也应该可以通过单击按钮将其删除，以便它们都可以访问。

你能指出我做正确的道路吗？

这是我到目前为止所做的：

$(document).ready(function() {

            $('#dragThis').resizable({
                stop: function(event, ui) {
                    var w = $(this).width();
                    var h = $(this).height();
                    var tr = $('#contentDiv');
                    tr.each(function() {
                        //alert( fields[$(this).index()] )
                        $(this).height(h - 45);
                    });


                    console.log('StopEvent fired')
                    console.log('Width:' + w);
                    console.log('Height:' + h)
                }
            }).draggable(
            {
                containment: $('body'),
                drag: function() {
                    var offset = $(this).offset();
                    var offsetImage = $("#<%=dropHere.ClientID %>").offset();
                    var xPos = offset.left;
                    var yPos = offset.top;

                    $('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);

                },
                stop: function() {
                    var finalOffset = $(this).offset();
                    var finalxPos = finalOffset.left;
                    var finalyPos = finalOffset.top;

                    $('#finalX').text('Final X: ' + finalxPos);
                    $('#finalY').text('Final X: ' + finalyPos);
                }
            });

这是我的HTML：

<div class="dragThis" id="dragThis">
                    <div class="content" id="contentDiv">
                        <p>
                            <asp:Label ID="lblContent" Width="2px" runat="server" Text="Label"></asp:Label>
                        </p>
                    </div>
                    <div class="pointer">
                        <div class="one">
                        </div>
                        <div class="two">
                        </div>
                    </div>
                </div>

我目前能够调整大小，拖动并获得1 div的位置。我需要让它适用于多个div。

请记住，我需要访问这些div（其中的位置和文字 - 设置和获取）

感谢任何帮助。

谢谢

Answer 1

将代码包装到可调用函数中。然后，当你创建新的div时，你应该使用“destroy”方法来破坏可调整大小的当前实例+ draggable（

$('#dragThis').resizable('destroy').draggable('destroy');

）然后运行函数重新初始化resizable + draggable;

jQuery多个可拖动对象创建

1 个答案: