Question

使用foundation4直接从jqueryUI example开始工作（仅在头部包含jquery）。有没有其他人有这个问题？我的列表不是拖放式排序。

头部

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2, #sortable3 { margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
  #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
    <script>
      $(function() {
        $( "ul" ).sortable({
          connectWith: "ul"
          dropOnEmpty: false
        });

        $( "#sortable1, #sortable2, #sortable3" ).disableSelection();
      });
    </script>

身体

（使用django ...对于时髦的模板标签抱歉）

    <div class="large-4 columns">
        <ul id="sortable1">
            <li>Nathan</li>
            <li>Bob</li>
            <li>Joe</li>
        </ul>
    </div>
    <div class="large-4 columns">
        <ul id="sortable2">

        </ul>
    </div>
    <div class="large-4 columns">
        <ul id="sortable3">

        </ul>
    </div>
    <!-- <script src="{% static "js/vendor/jquery.js" %}"></script> -->
    <script src="{% static "js/foundation.min.js" %}"></script>
    <script>
      $(document).foundation();
    </script>

Answer 1

我包含的所有订单都是错误的。

正文应如下所示......

<script src="{% static "js/vendor/jquery.js" %}"></script>
<script src="{% static "js/foundation.min.js" %}"></script>
<script>
  $(document).foundation();
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>

        $( "ul" ).sortable({
            connectWith: "ul"
            dropOnEmpty: false
        });


        $( "#sortable1, #sortable2, #sortable3" ).disableSelection();

</script>

可排序不与基础一起使用

1 个答案: