可分类的工作但不可拖动

Question

我创建了两个li元素，这些元素一开始都是隐藏的，然后用数据库中的数据克隆它们。

我在li中定义了一个可拖动对象，并在ul中定义了一个可排序对象。

当我测试时，拖动不起作用，但可排序效果很好。 我不知道为什么它不起作用。

$("#sortable").sortable({
  revert: true
});
$("#draggable").draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  revert: "invalid"
});
$("ul, li").disableSelection();

<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.0/jquery-ui.min.js"></script>

<li class="list-group-item template hide ui-state-default" id="draggable">
  <label class="labelRubrique" style="font-weight:bold"></label>
  <div class="row rubrique-image" data-rubrique-id="">
    <div class="col-md-8">
      <input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
    </div>
    <div class="col-md-3">
      <a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
    </div>
  </div>
</li>
<%-- Rubrique du modèle zéro --%>
  <li class="list-group-item templateEntiteZero hide ui-state-highlight">
    <label class="labelRubriqueEntiteZero" style="font-weight:bold"></label>
    <div class="row rubrique-image" data-rubrique-id="">
      <div class="col-md-8">
        <input name="enteteRubriqueEntiteZero" id="enteteRubriqueEntiteZero" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
      </div>
      <div class="col-md-3">
        <a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
      </div>
    </div>
  </li>
  <div class="row">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <liferay-ui:message key="admin.gestion.documents.rubriques.disponibles.documents" />
          <div class="panel-body">
            <ul class="list-group listRubrique">
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <liferay-ui:message key="admin.gestion.documents.rubriques.disponibles.entite.zero" />
          <div class="panel-body">
            <ul class="list-group listRubriqueEntiteZero" id="sortable">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>