Question

我创建了一个简单的div并使用jquery Draggable和resizable函数，我用四个手柄制作了方形边框蓝色。

现在，当我使用按钮执行相同操作时，jquery以某种方式为按钮添加了一个额外的div包装器来提供句柄并添加了很多我不想要的填充，并且需要最终结果就像具有边框的div一样处理如上。

该按钮也不可拖动。

您可以查看我创建的codepen here，然后点击两个按钮创建我上面解释的示例。

    <html>
<head>
    <title>Draggable, Moveable and Resizable DIV using jQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <style>
        #divContainer, #divResize { 
            width:120px; 
            height:120px; 
            padding:5px; 
            margin:5px; 
            font:13px Arial; 
            cursor:move; 
            float:left;
            background-color: aquamarine;
        } 
    </style>
<body>
    <div>

        <button id="btClickMeDragRes" type="button" class="btn btn-info">Create draggable/resizable DIV</button>
        <button id="btClickMakeButton" type="button" class="btn btn-success">Create resizable button</button>
        <div id="divContainer"> 
            Hello
        </div>
    </div>
</body>

CSS

.ui-resizable {
    border: 1px blue solid;
}

.ui-resizable-se, .ui-resizable-ne, .ui-resizable-sw, .ui-resizable-nw {
    background: blue;
    border: 1px solid blue;    
}

.ui-resizable-se {    
    width: 9px !important;
    height: 9px !important;
    right: -5px !important;
    bottom: -5px !important;
}

JS

var element_pos = 0;  

    var iCnt = 0;
    $(document).ready(function() {
        $(function() { $("#divResize").draggable().resizable(); });
        $('#btClickMeDrag').click(function() {

            var dynamic_div = $(document.createElement('div')).css({
                border: '1px solid', position: 'absolute', left: element_pos, 
                top: $('#divContainer').height() + 20,
                width: '20', height: '20', padding: '3', margin: '0', backgroundColor: 'beige'
            });
            element_pos = element_pos + $('#divContainer').width() + 20;
            $(dynamic_div).append('You can drag me too');
            $(dynamic_div).appendTo('#divContainer').draggable();
            myCount = myCount + 1;
        });

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

            var dynamic_div = $(document.createElement('div')).css({
                position: 'absolute', left: element_pos, 
                top: $('#divContainer').height() + 20,
                width: '120', height: '120', padding: '3', margin: '0', backgroundColor: 'burlywood'
            });

            element_pos = element_pos + $('#divContainer').width() + 20;

            $(dynamic_div).append('You can drag and resize me');
             $(dynamic_div).appendTo('#divContainer').draggable().resizable({
              handles: "all"
            });
            iCnt = iCnt + 1;
        });

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

            var dynamic_but = $(document.createElement('BUTTON')).css({
                position: 'absolute', left: element_pos, 
                top: $('#divContainer').height() + 20,
                width: '120', height: '50', backgroundColor: 'burlywood'
            });
            $(dynamic_but).text("KK button");
            $(dynamic_but).appendTo("body");
            $(dynamic_but).draggable().resizable({
              handles: "all"
            });

        });
    });

Answer 1

我相信包装div是必需的，由脚本添加来控制内部元素的大小调整功能。

.ui-wrapper{
  padding:0 !important;
}

将此添加到您的css并删除填充。

Jquery resizable在使按钮可拖动/可调整大小时添加了不必要的填充

1 个答案: