个人中心
gpt4 book ai didi

javascript - 使用 createElement() 创建的新元素不接受全局命令

转载 作者：行者123 更新时间：2023-12-02 23:03:25 26 4
gpt4 key购买 nike

我有一个可排序元素(我们称之为可排序容器)，其中包含许多可排序项目。我正在尝试创建一个按钮，该按钮将创建更多可排序容器，这些容器可以将其他可排序容器中的项目拖放到其中(如看板表)。

为此，我使用 .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>由我的函数创建的能够有 <li>从其他 <div> 拖放到其中的标签标签。

我的功能

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

最佳答案

简而言之，问题在于您仅使 .sortable 元素在页面加载时可排序。您之后添加的任何 HTML 都将无法排序，因为您尚未重新应用 .sortable() 函数。

这是一个带有注释代码的交互式示例，应该有助于理解正在发生的事情:

$(function() {
    // sortable elements to be made sortable on page load
    var sortableElements = $(".sortable");

    // a clone of the "new category" drop zone
    var containerTemplate = $(".category-container").clone();

    // the main container where clones will be appended
    var mainDiv = $("#mainDiv");

    // on page load, pass all ".sortable" elements to the makeSortable() function
    makeSortable(sortableElements);

    // "Add New Category" button
    $("#btnAdd").click(function() {
        // get a new template - on its own, this isn't sortable yet as .sortable() hasn't been called on it
        var newContainer = containerTemplate.clone();

        // append to #mainDiv
        mainDiv.append(newContainer);

        // find the <ul> and pass it to the makeSortable() function
        makeSortable(newContainer.find(".sortable"));
    })

    // generic function which takes an element and applies jQuery's "sortable" functionality
    function makeSortable(element) {
        element.sortable({
            connectWith: ".connectedSortable",
            receive: function(event, ui) {
                $(this).css("background-color", "#fff");
            }
        }).disableSelection();
    }
})
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;
}

/* CSS additions for example */
#btnAdd {
  display: block;
}
<input type="button" id="btnAdd" value="Add New Category" />

<div id="mainDiv">
  <div class="container" style="background-color:#fff;">
    <h2>All colors:</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>

  <div class="container category-container" style="background-color:#fff;">
    <h2>new category</h2>
    <ul class="sortable connectedSortable"></ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

关于javascript - 使用 createElement() 创建的新元素不接受全局命令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57701574/

26 4 0
文章推荐： javascript - 更新 onChange 事件并触发 onChange 事件 javascript
文章推荐： javascript - 是否可以从外部暂停/恢复网络 worker ？
文章推荐： javascript - API请求: better approach to set a Enum value
文章推荐： javascript - 根据按键定义自定义图标？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com