可拖动的innerHTML列表项不起作用

【问题标题】：innerHTML list items dragable not working可拖动的innerHTML列表项不起作用
【发布时间】：2016-12-10 02:22:32
【问题描述】：

这是我的代码。当我调用 init innerHTML 时列表项不可拖动我不知道我卡在哪里了。test1 和 test2 不可拖动可以拖动吗？

$(document).ready(function(){
 $('#accordion ul').append('<li>test1</li><li>test2</li>');
  $( "#accordion li" ).draggable({
        helper: "clone",
        revert: "invalid"
    });
});

<!DOCTYPE html>
<html>
  <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    </head>
  <body>
    <div class="grid_3 mainwindow formfields">
    <h3>Available Fields</h3>
    <div id="accordion">
         <ul>
            <li>First Name</li>
            <li>Last Name</li>  
            <li>Company</li>            
         </ul>
    </div>
    </div>
    </body>
</html>

【问题讨论】：

jsfiddle.net/oowg1xpr

标签： javascript jquery

【解决方案1】：

这应该可以看到sn-p

$(document).ready(function() {
  $('#accordion ul').append('<li>test1</li><li>test2</li>');
  $("#accordion li").draggable({
    helper: "clone",
    revert: "invalid"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

  <div class="grid_3 mainwindow formfields">
    <h3>Available Fields</h3>
    <div id="accordion">
      <ul>
        <li>First Name</li>
        <li>Last Name</li>
        <li>Company</li>
      </ul>
    </div>
  </div>

【讨论】：

【解决方案2】：

在 jquery ui 之前包含 jquery，它将起作用。

$(document).ready(function(){
  $( "#accordion li" ).draggable({
        helper: "clone",
        revert: "invalid"
    });
});

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="grid_3 mainwindow formfields">
    <h3>Available Fields</h3>
    <div id="accordion">
         <ul>
            <li>First Name</li>
            <li>Last Name</li>  
            <li>Company</li>            
         </ul>
    </div>
    </div>

【讨论】：

ok JC Dev 看看现在我使用 innerhtml 添加一些标签，例如 $(document).ready(function(){ $('#accordion ul').append('
test1

那么你的情况可能是这个问题的重复问题：stackoverflow.com/questions/18789354/…

【解决方案3】：

您需要导入正确的 jquery 和 jquery-ui 文件。

有效。

Working Fiddle

$(document).ready(function(){
  $( "#accordion li" ).draggable({
        helper: "clone",
        revert: "invalid"
    });
});

在此处获取您的文件 https://jquery.com/download/

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
  <head>
  <head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion li" ).draggable();
  } );
  </script>
    </head>
  <body>
    <div class="grid_3 mainwindow formfields">
    <h3>Available Fields</h3>
    <div id="accordion">
         <ul>
            <li>First Name</li>
            <li>Last Name</li>  
            <li>Company</li>            
         </ul>
    </div>
    </div>
    </body>
</html>

【讨论】：