jQuery UI Draggable在创建的元素上不起作用

Question

Draggable函数可用于其他已创建的元素，但不适用于我在Submit按钮后在函数内创建的元素。 我已经检查过是否要向'li'元素添加ID，并且它可以正常工作，所以为什么不能拖动它？ 当我在整个'ul'元素上使用它时，它将起作用。

HTML：

<div class="container">
  <form>
    <input type="text" id="entry">
    <button id="entryButton">button</button>
  </form>
  <ul id="list">
  </ul>
</div>





$("#entryButton").click(function(){
        event.preventDefault(); //stops refreshing
        var query = $("#entry").val();
        if (query !== "") {
            var registry = "<div id='drag'>" + query + "</div>"
            $("#list").append(registry)
            $("#entry").val("");
            return false; //also stops refreshing
            console.log(registry);
                           }
         })

    $("#drag").draggable({
      axis: "y"
      });

Answer 1

您只能使用一次id，因此建议您使用class。 此外，正如FerhatBAŞ所说，应该在创建后将可拖动对象添加到元素中。

https://jsfiddle.net/exqn1aoc/2/

$("#entryButton").click(function(){
    event.preventDefault(); //stops refreshing
    var query = $("#entry").val();
    if (query !== "") {
        var registry = "<div class='drag'>" + query + "</div>"

        $("#list").append(registry);
        $('#list').children().last().draggable();
        $("#entry").val("");
        return false; //also stops refreshing
        console.log(registry);
                       }
     });

Answer 2

只需使用class而不是id来创建由多朋友创建的项目即可将其拖放到按钮单击内部。

 $("#entryButton").click(function() { event.preventDefault(); //stops refreshing var query = $("#entry").val(); if (query !== "") { var registry = "<div id='drag' class='drag'>" + query + "</div>" $("#list").append(registry) $("#entry").val(""); $(".drag").draggable({ axis: "y" }); return false; //also stops refreshing console.log(registry); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <div class="container"> <form> <input type="text" id="entry"> <button id="entryButton">button</button> </form> <ul id="list"> </ul> </div> 

Answer 3

首先，您需要将draggable（）函数放入click函数中。

第二，不要使用id 。 重复的id's是无效的HTML，这就是导致仅第一个#drag可拖动的原因。 使用班级代替

请参见下面的代码段

 $("#entryButton").click(function() { event.preventDefault(); //stops refreshing var query = $("#entry").val(); if (query !== "") { var registry = "<div class='drag'>" + query + "</div>" $("#list").append(registry) $("#entry").val(""); $(".drag").draggable() return false; //also stops refreshing console.log(registry); } }) 

 .drag { height: 100px; width: 100px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <div class="container"> <form> <input type="text" id="entry"> <button id="entryButton">button</button> </form> <ul id="list"> </ul> </div>