Question

我正在尝试在我的aspx页面上应用jQuery resizable和draggable。除了可调整大小的句柄放在控件的不同位置之外，大部分内容都是有序的，即

对于标签（DynamicControlABC），它将显示在中心位置标签，而文本框（DynamicControlTextbox1）得到它显示在角落外约3px。

如果我尝试根据文本框重新定位手柄，则手柄会更多地朝向标签的中心移动，反之亦然（我会发布一个屏幕截图，但发布图片需要至少10个声望点:(）。我在IE10和Firefox上查看了该页面，两者都得到了相同的结果。

我的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="css_custom/jquery-ui.css" type="text/css" />
    <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.4.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(document).ready(function (e) {
            $("#btnEdit").click(function (e) {
                SetButtonText();
                ToggleEditMode();
            });

        function SetButtonText() {
            $('#btnEdit').val(function (i, text) {
                return text === "Edit" ? "Editing" : "Edit";
            });
        }

        function ToggleEditMode() {
            if ($("#btnEdit").val() != "Edit") {
                $("*").filter("[id^=DynamicControl]"), function () {
                    $(this).resizable().parent('.ui-wrapper').draggable({ opacity: .45, cancel: "null" });
                };
            }
            else {
                $("*").resizable({ cancel: "*" }).draggable({ cancel: "*" });
            }
        }
    </script>
</head>
<body>
    <form id="MyForm" runat="server">
    <asp:Label Text="ABCDEFGH" runat="server" ID="DynamicControlABC"></asp:Label>
    <asp:TextBox runat="server" ID="DynamicControlTextbox1" Text="Text1"></asp:TextBox>
    <input type="button" id="btnEdit" value="Edit" />
    </form>
</body>
</html>

我也是新来的问题，所以如果我错过了什么，请告诉我。

这就是我在jQuery-UI.js中所做的。以下代码已存在

if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {

        //Create a wrapper element and set the wrapper to the new current internal element
        this.element.wrap(
            $("<div class='ui-wrapper' style='overflow: hidden;'></div>").css({
                position: this.element.css("position"),
                width: this.element.outerWidth(),
                height: this.element.outerHeight() ,
                top: this.element.css("top") ,
                left: this.element.css("left")
            })
        );

我添加了一个标签： -

 else if(this.element[0].nodeName.match(/label|span|div/i)) {

        this.element.wrap(
            $("<div class='ui-wrapper' style='overflow: hidden;'></div>").css({
                position: this.element.css("position"),
                width: this.element.outerWidth() + 7,
                height: this.element.outerHeight() + 3,
                top: this.element.css("top") ,
                left: this.element.css("left") 
            })
        );

现在标签处理的手柄很好了。

Answer 1

可调整大小的句柄奇怪地放置的原因是我认为你正在使用通用选择器（“*”）所以它针对任何东西，使用这个选择器并没有那么糟糕但是如果你构建一个应用程序它非常昂贵用它来过滤DOM

这里看看我在你的代码上做了什么

有一些小的重构和删除（你可以随意放回你的方法）

我不知道为什么你使用取消而不是可拖动禁用（让我知道这是否有意）

$(document).ready(function (e) {

       $("#btnEdit").click(function () {  
             resizableMode();
       });


        function resizableMode() {

            //cache selectors
            var $elem = $('[id^=DynamicControl]'); 
            var $editBtn = $("#btnEdit");

            //toggleText button
            $editBtn.val(function (i, text) {
                return text === "Edit" ? "Editing" : "Edit";
            }); 

            //set resizable to textbox
            $elem.resizable(); 

            //set states
            if ($editBtn.val() !== "Edit") {
                 $elem.resizable('enable')
                      .parent('.ui-wrapper').draggable({ opacity: 0.45 , disabled:false }); 
            } else { 
                $elem.resizable('disable')
                     .parent('.ui-wrapper').draggable({ disabled: true });
            }
        }

});

见输出

http://jsbin.com/sowah/1 （有轻微的CSS变化）

你可以在这里编辑它 http://jsbin.com/sowah/1/edit

调整Div宽度以适合其子控件

1 个答案: