拖拽左侧菜单元素到右侧后动态添加表单组件并调整Div尺寸求助

我来帮你搞定这个表单构建器的需求，咱们通过修改jQuery UI的排序事件来实现两个核心功能：拖拽后调整元素宽高，以及根据拖拽的元素类型添加对应的表单控件。

关键修改点 #

• 利用sortable的receive事件处理拖拽完成后的逻辑
• 根据拖拽元素的ID判断类型，动态修改元素宽高并添加对应表单组件
• 修正原代码中存在的标签闭合、资源引用问题

修改后的完整代码 #

HTML部分

<!doctype html>
<head>
    <title>Form Builder</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="myscript.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="Title">
        <img src="" width="200" height="70" >
    </div>
    <div id="listOfItems">
        <div id="Heading" class="block">Heading 
            <div class="close">X</div>
        </div>
        <div id="txtbox" class="block">Text Box 
            <div class="close">X</div>
        </div>
        <div id="txtfield" class="block">Text Field 
            <div class="close">X</div>
        </div>
        <div id="RB1" class="block">Radio Button-1 
            <div class="close">X</div>
        </div>
        <div id="CB1" class="block">Checkbox 
            <div class="close">X</div>
        </div>
    </div>
    <div id="Container" >
    </div>
</body>
</html>

JavaScript（myscript.js）部分

$(function() {
    $('#Container').sortable({
        helper: 'clone',
        receive: function(event, ui) {
            // 获取拖拽元素的ID
            var itemId = ui.item.attr('id');
            // 定位容器内刚添加的新元素
            var newItem = $(this).children().last();
            
            // 1. 切换类名实现宽高动态调整
            newItem.removeClass('block').addClass('block1');
            
            // 2. 根据元素类型添加对应表单组件
            switch(itemId) {
                case 'Heading':
                    newItem.append('<input type="text" placeholder="输入标题" style="width:270px; margin-top:8px;">');
                    break;
                case 'txtbox':
                    newItem.append('<input type="text" placeholder="单行文本" style="width:270px; margin-top:8px;">');
                    break;
                case 'txtfield':
                    newItem.append('<textarea placeholder="多行文本" style="width:270px; height:40px; margin-top:5px;"></textarea>');
                    break;
                case 'RB1':
                    newItem.append('<label><input type="radio" name="radio-group"> 选项1</label>');
                    newItem.append('<label style="margin-left:15px;"><input type="radio" name="radio-group"> 选项2</label>');
                    break;
                case 'CB1':
                    newItem.append('<label><input type="checkbox"> 选项A</label>');
                    newItem.append('<label style="margin-left:15px;"><input type="checkbox"> 选项B</label>');
                    break;
            }
            
            // 给新元素添加删除功能
            newItem.find('.close').click(function() {
                $(this).parent().remove();
            });
        }
    });

    $('.block').draggable({
        helper: 'clone',
        connectToSortable: '#Container',
        revert: 'invalid'
    });

    // 防止拖拽时页面文本被选中
    $('body').disableSelection();
});

CSS部分

#Container{
    position:absolute;
    width:1024px;
    height:508px;
    left:300px;
    top:100px;
    overflow: auto;
    border:1px solid;
    box-shadow: 0 0 0 3px hsl(0, 0%, 50%), 0 0 0 5px hsl(0, 0%, 60%);
}

#Title{
    position:absolute;
    font-family: sans-serif;
    font-size:30px;
    width:1024px;
    left:150px;
    color:Red;
    text-align:center;
    height:100px;
}

.block{
    position:relative;
    width:100px;
    height:50px;
    left:0px;
    top:50px;
    margin-bottom:2px;
    border:1px solid;
    cursor:move; /* 添加拖拽光标提示 */
    padding:5px;
}

.block1{
    position:relative;
    width:300px;
    height:auto; /* 自动适应内容高度 */
    left:0px;
    top:50px;
    background-color:#f0f0f0;
    margin-bottom:10px;
    border:1px solid #ccc;
    padding:10px;
}

#Heading{
    background-color:red;
    color:white;
}

#txtbox{
    background-color:lightblue;
}

#txtfield{
    background-color:lightgreen;
}

#RB1{
    background-color:orange;
}

#CB1{
    background-color:purple;
    color:white;
}

#listOfItems{
    position:absolute;
    top:100px;
    width:250px;
    height:500px;
    border:1px solid;
    overflow:hidden;
    border-style: doubled;
    box-shadow: 0 0 0 3px hsl(0, 0%, 50%), 0 0 0 5px hsl(0, 0%, 60%);
}

.close{
    position: absolute;
    height: 15px;
    width: 12px;
    right: 5px;
    top: 5px;
    border: 1px solid red;
    text-align:center;
    cursor:pointer;
    display:none;
    background-color:white;
    color:red;
    font-size:12px;
}

.block:hover .close, .block1:hover .close{
    display:block;
}

功能说明 #

1. 宽高动态调整：拖拽完成后，元素会从原有的窄小样式切换为宽300px、高度自适应的样式，适配表单组件的展示。
2. 表单组件动态添加：通过判断拖拽元素的ID，自动添加对应的表单控件——标题输入框、单行文本框、多行文本域、单选按钮组、复选框组都已实现。
3. 删除功能优化：每个拖拽到容器的元素都保留了关闭按钮，点击即可删除该元素，且鼠标悬停时按钮才会显示，不影响界面整洁。
4. 拖拽体验提升：添加了拖拽光标提示，修正了jQuery UI的引用问题，确保拖拽交互流畅。

内容的提问来源于stack exchange，提问作者Uday Kumar