如何禁用拖放在Jquery Nestable List

Question

我试图创建一个使用jQuery的嵌套列表嵌套拖动功能禁用整个列表。 以下是我的html。

<div class="dd" id="nestable"> 
<ol class="dd-list"> 
    <li class="dd-item" id="no-drag"> 
     <div class="dd-handle"> 
      Foo 
      <div class="pull-right action-buttons"> 
       <a class="blue" href="#"> 
        <i class="ace-icon fa fa-pencil bigger-130"></i> 
       </a> 

       <a class="red" href="#"> 
        <i class="ace-icon fa fa-trash-o bigger-130"></i> 
       </a> 
      </div> 

     </div> 
     <ol class="dd-list"> 
      <li class="dd-item" id="no-drag"> 
       <div class="dd-handle"> 
        Bar 
        <div class="pull-right action-buttons"> 
         <a class="blue" href="#"> 
          <i class="ace-icon fa fa-pencil bigger-130"></i> 
         </a> 

         <a class="red" href="#"> 
          <i class="ace-icon fa fa-trash-o bigger-130"></i> 
         </a> 
        </div> 

       </div> 
       <ol class="dd-list"> 
        <li class="dd-item" id="no-drag"> 
         <div class="dd-handle"> 
          Baz 
          <div class="pull-right action-buttons"> 
           <a class="blue" href="#"> 
            <i class="ace-icon fa fa-pencil bigger-130"></i> 
           </a> 

           <a class="red" href="#"> 
            <i class="ace-icon fa fa-trash-o bigger-130"></i> 
           </a> 
          </div> 

         </div> 
        </li> 
       </ol> 
      </li> 
     </ol> 
    </li> 
</ol> 

我的脚本看起来像下面::

$('.dd').each(function(){ 
      $(this).nestable({ 
       maxDepth: 1, 
       group: $(this).prop('id') 
      }); 
     }); 

目前，即时通讯能够创建嵌套列表，用户可以重新排列嵌套列表。我希望禁用该功能，但无法完成此功能。请指教。

Answer 1

可以设置MAXDEPTH：0 这不会禁用拖放，但不会阻止OBJ搬迁

Answer 2

我也有类似的问题，并通过使用CSS pointer-events固定它。

CSS：

.drag_disabled{ 
    pointer-events: none; 
} 

.drag_enabled{ 
    pointer-events: all; 
} 

HTML：

<label class=""><input id="draggable_list" class="" name="draggable_list" type="checkbox" value="false"> <span>Activate Ordering </span></label> 

<div id="list" class="drag_disabled dd"> 
    <ol class="dd-list"> 
     <li class="dd-item" data-id="Item 1"> 
      <div class="dd-handle dd-outline dd-anim"> 
       Text 1 
       </div> 
      </div> 
     </li> 
     <li class="dd-item" data-id="Item 3"> 
      <div class="dd-handle dd-outline dd-anim"> 
       Text 2 
      </div> 
     </li> 
    </ol> 
</div> 

的JavaScript（只需拨动类drag_enabled和drag_disabled上复选框：

$('#list').nestable({maxDepth: 1}); 

    $('#draggable_list').change(function(){ 
     $('#list').toggleClass('drag_disabled drag_enabled'); 
    });