链接不在引导程序内部排序LI中发射

Question

我在bootstrap选项卡中有一个可排序的django对象列表，每个元素内部都有链接。单击时，链接无需执行任何操作。没有任何行为，就好像您单击纯文本一样。当悬停时，光标确实会发生变化，但否则它的作用就像它不是链接。

我以前已经实现了此功能，但是使用按钮而不是LI，并且在那里的链接上没有麻烦。我已经确认该视图和URL可以通过将它们放在正常链接中的其他页面上。

。

有一个事件侦听器-keydown在jquery.js:4334上 - 如果从开发人员工具中杀死，它似乎可以解决该问题。我不知道这是什么，它是如何启动的，或者杀死它的其他后果是什么。

包含链接的选项卡的代码：（到benchmarks:questionremove的链接）

<div role="tabpanel"  class="tab-pane" data-toggle="tab" id="questions" href="#questions">
  {% csrf_token %}
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Sortable photos
    // jQuery and jQuery-UI are in base.html
    console.log('starting')
    var teacherid = "{{this_teacher.pk}}";
    var sectionid = "{{this_section.pk}}";
    var adminid = "{{this_admin.pk}}";
    var benchmarkid = "{{this_benchmark.pk}}";

    // using jQuery
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue =   decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    var baseUrl=document.location.href.split('/').slice(0,3).join('/')+'/benchmarks/';
    console.log(baseUrl+teacherid+"-"+sectionid+"-"+adminid+"-"+benchmarkid+"/sort");
    console.log("token",csrftoken)
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

      $("#sortable").sortable({
        update: function(event, ui) {
          var serial = $('#sortable').sortable('serialize');
      $.ajax({
        url: baseUrl+teacherid+"-"+sectionid+"-"+adminid+"-"+benchmarkid+"/sort",
        type: "post",
        beforeSend: function(jqXHR, settings) {
              jqXHR.setRequestHeader("X-CSRFToken", csrftoken);
        },
        data: serial
      });
        },
      }).disableSelection();
    });
  </script>
  {% csrf_token %}
    <div class="admin container" style="padding-top:8px; padding-left:6px;">
      <div class="panel-group" style="width:100%;">
        {% if question_list %}
        {% csrf_token %}
          <ul id="sortable" class="ui-sortable">
            {% for question in question_list %}
              <li id="question_{{ question.pk }}" class="ui-state-default" style='background-color:#ffffff;'>
                <span class="glyphicon glyphicon-resize-vertical" style="left-padding:-2px;"></span>&nbsp;&nbsp;
                <span style="float:right;"><a href={% url 'benchmarks:questionremove' Question_id=question.pk %} >
                  <span class="glyphicon glyphicon-pencil"></span></span>
                </a>
                {{ question.Number}} {{question.Text}}
              </li>
            {% endfor %}
          </ul>
        {% else %}
          ...
        {% endif %}
      </div>
      </div>
    </div>

Answer 1

在这里简单建议：从经验中，我发现jQuery UI是具有此类问题的PITA（主要是因为它很大程度上依赖于默认的CSS类和属性）。

因此，从现在开始，我正在使用dragula进行拖动-N-Drop Action，其语法与Vanillajs相同，您的示例将是：

dragula([document.querySelectorAll('#sortable li')]).on('dragend', function() {
    var serial = $('#sortable').sortable('serialize');
    $.ajax({
      url: baseUrl+teacherid+"-"+sectionid+"-"+adminid+"-"+benchmarkid+"/sort",
      type: "post",
      beforeSend: function(jqXHR, settings) {
          jqXHR.setRequestHeader("X-CSRFToken", csrftoken);
      },
      data: serial
    });
  },
}).on('selectstart', function(){ return false; });

和一些用于禁用选择的user-select: none。

演示和文档：https：//bevacqua.github.io/dragula/

Answer 2

看起来您缺少" "围绕href值

<a href={% url 'benchmarks:questionremove' Question_id=question.pk %} >

将其更改为此

<a href="{% url 'benchmarks:questionremove' Question_id=question.pk %}" >

您当前的HTML也无法正确格式化。

  <span style="float:right;">
      <a href={% url 'benchmarks:questionremove' Question_id=question.pk %} >
          <span class="glyphicon glyphicon-pencil"></span>
  </span>
     </a>

结构与上述" "一起，您的最终HTML必须看起来像..

  <span style="float:right;">
      <a href="{% url 'benchmarks:questionremove' Question_id=question.pk %}">
          <span class="glyphicon glyphicon-pencil"></span>
      </a>
  </span>