【发布时间】：2020-01-02 05:20:35
【问题描述】：
我有一个包含许多可排序项目的可排序元素（我们称之为可排序容器）。我正在尝试创建一个按钮，该按钮将创建更多可排序容器，可以将其他可排序容器中的项目拖放到其中（如看板表）。
为此，我使用.createElement() 附加适当的标签（在本例中：<div>、<ul> 和<h2>）
按预期运行的元素如下所示：
<!-- a test container that behaves as excpected
this is able to have elements dragged from the main sortable
container and dropped into this div -->
<div class="container" style="background-color:#fff;">
<h2>new category</h2>
<ul class="sortable connectedSortable"> //when inspected with dev tools, class="sortable connectedSortable ui-sortable"
</ul>
</div>
这是由我的函数创建的元素，其行为与预期不符：
<div class="container" style="background-color:#fff;">
<h2>new category</h2>
<ul class="sortable connectedSortable ui-sortable">
</ul>
</div>
我的问题是它们看起来相同，但行为方式似乎不同！我的目标是让我的函数创建的<div> 能够从其他<div> 标签拖放到<li> 标签中。
我的功能
<script>
// function from sortable
$(function() {
$( ".sortable" ).sortable({
connectWith: ".connectedSortable",
receive: function( event, ui ) {
$(this).css({"background-color":'#fff'});
}
}).disableSelection();
//trying to add a new container with this function
document.getElementById("btnAdd").onclick = function () {
var h2 = document.createElement('h2'); //create h2 tag
h2.textContent="new category" //text = "new category"
var ul = document.createElement('ul'); //create ul tag
ul.className = "sortable connectedSortable ui-sortable" //specify class name
var div = document.createElement('div'); //create new div
div.className="container" // specify div class
div.style.backgroundColor="#fff"; //specify div color
document.getElementById('mainDiv').appendChild(div); //append newly created div to a main div section
div.appendChild(h2) //append newly created h2 to new div
div.appendChild(ul) //append newly created ul to new div
};
});
</script>
我的按钮触发功能
<!-- this is the button that triggers function -->
<body>
<input type="button" id="btnAdd" value="Add New Category">
</body>
我感兴趣的元素
<div id="mainDiv">
<!-- my main sortable container -->
<div class="container" style="background-color:#fff;">
<h2>All colors:<br /></h2>
<p>Add as many categories as you'd like and start sorting!</p>
<ul class="sortable connectedSortable">
<li class="card">testing</li>
<li class="card">testing</li>
<li class="card">testing</li>
<li class="card">testing</li>
<li class="card">testing</li>
</ul>
</div>
<!-- a test container that behaves as excpected
this is able to have elements dragged from the main sortable container and dropped into this div -->
<div class="container" style="background-color:#fff;">
<h2>new category</h2>
<ul class="sortable connectedSortable">
<li class="card">testing</li>
</ul>
</div>
</div>
</html>
我正在使用的样式
<style>
body {font-family:Arial;}
h2 {margin:5px;}
p{margin:5px;}
input[type=text] {margin:10px}
input[type=button] {margin:10px}
.container {width: 20%; border: 1px solid; float:left; clear:right;margin:10px; border-radius: 5px;}
.sortable { list-style-type: none; margin:0; padding:2px; min-height:30px; border-radius: 5px;}
.sortable li { margin: 3px 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
.sortable li span { position: absolute; margin-left: -1.3em; }
.card{background-color:#f2e2e2; border-radius:3px;}
</style>
【问题讨论】：
标签： javascript jquery class jquery-ui-sortable createelement