Question

https://jsfiddle.net/UdayKumar/rm5ey912/2/

我复制了工作演示。

从左侧拖动元素并在右侧拖放。 div必须动态改变其宽度和高度。在删除不同的元素时，我想动态添加元素，如单选按钮，复选框，文本字段等。有人可以帮助我吗？

<!doctype html>
<head>
<title>Form Builder</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script src="jQuery.min.js"></script>
<script src="jQuery.ui.js" type="text/javascript"></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>

    <div id="Container" >

    </div>

</body>
</html>


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


#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;

}

.block1{
    position:relative;
    width:200px;
    height:50px;
    left:0px;
    top:50px;
    background-color:green;
    margin-bottom:2px;
    border:1px solid;

}

#Heading{
background-color:red;

}


#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: relative;
    height: 15px;
    width: 12px;
    left: 976px;
    border: 1px solid red;
    display:none;
}

.block:hover .close{

    display:block;
}

Answer 1

所以我设法从你提供的代码中创建一个更简单的工作模型。你提供的小提琴不起作用，因为包含的jQuery-ui不合适。

逻辑是，在放弃之前，我们正在检查丢弃项的id，并根据该id，删除了drop元素的内容。通过向drop元素添加新的css类，可以指定droppable的高度和宽度。我添加了一些代码，如图所示

2018/05/31 16:56:55 Starting overwatch
2018/05/31 16:56:55 Using in-cluster config to connect to apiserver
2018/05/31 16:56:55 Using service account token for csrf signing
2018/05/31 16:56:55 No request provided. Skipping authorization
2018/05/31 16:56:55 Successful initial request to the apiserver, version: v1.10.2
2018/05/31 16:56:55 Generating JWE encryption key
2018/05/31 16:56:55 New synchronizer has been registered: kubernetes-dashboard-key-holder-kube-system. Starting
2018/05/31 16:56:55 Starting secret synchronizer for kubernetes-dashboard-key-holder in namespace kube-system
2018/05/31 16:56:55 Synchronizer kubernetes-dashboard-key-holder-kube-system exited with error: unexpected object: &Secret{ObjectMeta:k8s_io_apimachinery_pkg_apis_meta_v1.ObjectMeta{Name:,GenerateName:,Namespace:,SelfLink:,UID:,ResourceVersion:,Generation:0,CreationTimestamp:0001-01-01 00:00:00 +0000 UTC,DeletionTimestamp:<nil>,DeletionGracePeriodSeconds:nil,Labels:map[string]string{},Annotations:map[string]string{},OwnerReferences:[],Finalizers:[],ClusterName:,Initializers:nil,},Data:map[string][]byte{},Type:,StringData:map[string]string{},}
2018/05/31 16:56:57 Restarting synchronizer: kubernetes-dashboard-key-holder-kube-system.
2018/05/31 16:56:57 Starting secret synchronizer for kubernetes-dashboard-key-holder in namespace kube-system
2018/05/31 16:56:57 Synchronizer kubernetes-dashboard-key-holder-kube-system exited with error: kubernetes-dashboard-key-holder-kube-system watch ended with timeout
2018/05/31 16:56:59 Storing encryption key in a secret
panic: secrets is forbidden: User "system:serviceaccount:test:dashboard" cannot create secrets in the namespace "kube-system"

goroutine 1 [running]:
github.com/kubernetes/dashboard/src/app/backend/auth/jwe.(*rsaKeyHolder).init(0xc420254e00)
    /home/travis/build/kubernetes/dashboard/.tmp/backend/src/github.com/kubernetes/dashboard/src/app/backend/auth/jwe/keyholder.go:131 +0x2d3
github.com/kubernetes/dashboard/src/app/backend/auth/jwe.NewRSAKeyHolder(0x1a7ee00, 0xc42037a5a0, 0xc42037a5a0, 0x127b962)
    /home/travis/build/kubernetes/dashboard/.tmp/backend/src/github.com/kubernetes/dashboard/src/app/backend/auth/jwe/keyholder.go:170 +0x83
main.initAuthManager(0x1a7e300, 0xc4201e2240, 0xc42066dc68, 0x1)
    /home/travis/build/kubernetes/dashboard/.tmp/backend/src/github.com/kubernetes/dashboard/src/app/backend/dashboard.go:183 +0x12f
main.main()
/home/travis/build/kubernetes/dashboard/.tmp/backend/src/github.com/kubernetes/dashboard/src/app/backend/dashboard.go:101 +0x28c

这是工作fiddle。小提琴。看看

从菜单列表中删除后动态添加元素

1 个答案: