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

我正在尝试在我的aspx页面上应用jQuery可调整大小和可拖动。除了可调整大小的控制柄被放置在控件的不同位置，即

对于labelDynamicControlABC，它显示在 textboxDynamicControlTextbox1的标签是 所示为se角外约3倍

如果我尝试根据文本框重新定位控制柄，则控制柄将更靠近标签中心，反之亦然 我本来会发布一张截图，但发布一张图片至少需要10个信誉点：。我在IE10和Firefox上查看了这个页面，结果都是一样的

我的代码如下：

此外，我是新来这里问问题，所以请让我知道，如果我错过了一些东西

这就是我在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") 
            })
        );

---

现在，标签上的手柄很好

可调整大小的句柄被奇怪地放置的原因是，我认为您正在使用通用选择器*因此它针对任何对象，使用此选择器并不是很糟糕，但如果您构建应用程序，则在筛选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 });
            }
        }

});

参见输出

css有轻微的变化

你可以在这里编辑它

---

1。非常感谢您指出*选择器，您的方法更具成本效益。2.是的，取消是故意的，因为在我输入cancel:null之前，没有任何控件会被拖动，也没有使用您的代码尝试过，但就可拖动而言，它不起作用3。现在的问题是，如果您将可调整大小应用到标签字段，需要在jQuery-ui.js中进行编辑，那么可拖动句柄将出现在标签的中间部分。也许我需要为它们使用一套单独的css，在我尝试后会让您知道成功了！！！。。。编辑jQuery-ui.js并为标签添加单独的类，但是当我点击编辑按钮时，控件的位置变得混乱…我知道这是因为控件中添加了包装器div和句柄…有解决方法吗？嗯，很难理解你这边发生了什么你介意在你的帖子中添加更新的代码吗，不管怎样，我理解的是你的拖动手柄有问题，你可以用CSS控制它，当启用可拖动时，它总是在内部和可见，检查.ui wrapper我已经在编辑中添加了对标签所做的更改。基本上修改了jQuery-UI.css来设置UI包装器的css。这是路吗？我将需要做同样的事情，我的按钮，也许稍后为其他控制？

$(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 });
            }
        }

});