自定义表单：控件的属性设置

最新推荐文章于 2024-05-29 09:02:18 发布

信仰柴神的人

最新推荐文章于 2024-05-29 09:02:18 发布

阅读量1.2k

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/l9528/article/details/122254759

版权

本文介绍了如何在自定义表单中设置表单元素的属性，重点讨论了jQuery UI的sortable功能，使得表单元素可以在页面上自由排序。通过draggable和droppable实现拖拽，利用事件委托处理表单元素的点击，并在右侧输入框修改属性时实时更新元素。在使用sortable时，因排序导致的索引问题需要注意。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，今天我和大家分享一下自定义表单中的表单元素的属性设置。在分享之前，我想和大家说一下jQuery UI中的sortable（排序）。

在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享 draggable 属性。

说简单点就是我们把表单元素拖拽到空白页面了，sortable能让在空白页面上的表单元素任意移动位置。如下图：非常好用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            /*弹性盒布局*/
            display: flex;
            /*默认的，可以不写*/
            flex-direction: row;
        }

        .left {
            margin: 0 50px;
            height: 500px;
            width: 500px;
            border: 1px solid black;
            /*弹性盒布局的居中方案*/
            display: flex;
            /*横轴居中*/
            justify-content: center;
            /*纵轴居中*/
            align-items: center;
        }

        .rh {
            margin: 0 50px;
            padding: 20px;
            height: 500px;
            width: 500px;
            border: 1px solid black;
            //隐藏
            display: none;
        }

        .right {
            margin: 0 50px

最低0.47元/天解锁文章