Question

这是我的代码。当我调用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>

Answer 1

在jquery ui之前加入jquery，它会起作用。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

有效。

Working Fiddle

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

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

Answer 3

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

Answer 4

这应该可以看到片段

＆＃13;

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

＆＃13;

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

＆＃13;

innerHTML列表项可拖动不起作用

4 个答案: