Question

关于如何使用JQuery创建一个可调整大小的div，有一些帖子。我正在使用asp.net并使用了几个帖子中的代码来执行此操作，这些内容将在下面附加。我现在需要做的是有一个按钮，当点击我得到另一个克隆的可拖动和可重新调整大小的div时，我还需要捕获创建的每个div的x，y宽度和高度。下面的代码捕获硬编码的代码，并在一系列asp.net文本框中显示值。

欢呼任何帮助和建议

此致 CM

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs"   
Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Cloned Divs</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
    #drag {
        width: 6em;
        height: 6em;
        padding: 0.5em;
        border: 3px solid #ccc;
        border-radius: 0 1em 1em 1em;
        background-color: #fff;
        background-color: rgba(255,255,255,0.5);
    }

    #Buttons {
        width: 50px;
        height: 50px;
        left: 50px;
        position: absolute;
    }
</style>
<script>
    $(function () {
        $("#drag").draggable(
            {
                containment: $('body'),
                drag: function () {
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                    var myHeight = $("#draggable").height();
                    $('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);
                    $("#<%=txtX.ClientID%>").val(xPos);
                    $("#<%=txtY.ClientID%>").val(yPos);
                }
            }).resizable({
                resize: function (event, ui) {
                    var mywidth = $(event.target).width();
                    var myHeight = $(event.target).height();
                    $('#width').text('width: ' + mywidth);
                    $('#height').text('height: ' + myHeight);
                    $("#<%=txtWidth.ClientID%>").val(mywidth);
                    $("#<%=txtHeight.ClientID%>").val(myHeight);
                }

            });
    });

        $('#btnAdd').click(function () {

            var structure = $('<div id="draggable1" class="ui-widget-content"></div>');
            $('#body').append(structure);

        });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div id="drag" class="ui-widget-content">
        <ul>
            <li id="posX"></li>
            <li id="posY"></li>
            <li id="width"></li>
            <li id="height"></li>
        </ul>
    </div>
    <div id="Buttons">
        <asp:Label ID="lblX" runat="server" Text="X: "></asp:Label><asp:TextBox
 ID="txtX" runat="server"></asp:TextBox>
        <asp:Label ID="lblY" runat="server" Text="Y: "></asp:Label><asp:TextBox 
ID="txtY" runat="server"></asp:TextBox>
        <asp:Label ID="lblWidth" runat="server" Text="Width: "></asp:Label><asp:TextBox
ID="txtWidth" runat="server"></asp:TextBox>
        <asp:Label ID="lblHeight" runat="server" Text="Height: "></asp:Label>
<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox>
        <asp:Button ID="btnAdd" runat="server" Text="Add Div" />
    </div>
</form>
</body>
</html>

Answer 1

嗯，你有一些严重的CSS问题需要处理。我没有进入这个问题，但我会回答你关于div添加的问题。

最简单的方法是将“$ .draggable”事件转换为单独的方法，并通过类而不是id应用draggable属性。然后在每个div添加上调用它。另外，使用JQuery附加元素使用$(document.body).append("")。

最后，您不应该使用asp：Button，但如果必须，请确保添加OnClientClick="return false;"属性，否则它将提交您的页面。

这是javascript调整：

function ApplyDrag() {
    $(".draggable").draggable(
    {
        containment: $('body'),
        drag: function() {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            var myHeight = $("#draggable").height();
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
            $("#<%=txtX.ClientID%>").val(xPos);
            $("#<%=txtY.ClientID%>").val(yPos);
        }
    }).resizable({
        resize: function(event, ui) {
            var mywidth = $(event.target).width();
            var myHeight = $(event.target).height();
            $('#width').text('width: ' + mywidth);
            $('#height').text('height: ' + myHeight);
            $("#<%=txtWidth.ClientID%>").val(mywidth);
            $("#<%=txtHeight.ClientID%>").val(myHeight);
        }

    });
}

$(function() {
    ApplyDrag();

    $('#<%=btnAdd.ClientID %>').click(function() {
        var structure = $('<div class="draggable ui-widget-content">BLABLA</div>');
        $(document.body).append(structure);
        ApplyDrag();
    });
});

JQuery在按钮单击时添加多个可重新调整大小的Div

1 个答案: