为jQueryUI中的嵌套可排序项目禁用拖动冒泡

Question

给定一组可排序/可拖放的容器，其中每个包含可拖放/可排序的列表项目，但如果不允许拖动事件（一个或多个）直至父容器？

在下面的示例中，如果在“项目3（禁用）”上拖动，则父容器将成为拖动目标。它应该仍然是可拖动的，但只能在内部项目之外。

<script> 
    $(function() { 
    $('.sortable').sortable({ 
     items: '.draggable' 
    }); 
    $('.sortable').disableSelection(); 
    }); 
</script> 

<ul class="sortable outer"> 
    <li class="outer-item draggable"> 
    <ul class="sortable"> 
     <li class="inner-item draggable"></span>Item 1</li> 
     <li class="inner-item draggable"></span>Item 2</li> 
     <li class="inner-item"></span>Item 3 (Disabled)</li> 
    </ul> 
    </li> 
    <li class="outer-item draggable"> 
    <ul class="sortable"> 
     <li class="inner-item draggable"></span>Item 4</li> 
     <li class="inner-item draggable"></span>Item 5</li> 
     <li class="inner-item draggable"></span>Item 6</li> 
    </ul> 
    </li> 
</ul> 

https://codepen.io/jneander/full/NRNZqL/

Answer 1

为了停止拖动事件非排序的元素，您可以禁用的项目不包括在内：

$(function() { 
 
    $('.sortable').sortable({ 
 
    items: '.draggable' 
 
    }); 
 
    $('li:not(".draggable")').on('mousedown', function(e) { 
 
    e.stopPropagation(); 
 
    }); 
 
});

body { 
 
    font-family: Helvetica, sans-serif; 
 
    color: #222; 
 
} 
 

 
.sortable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.outer { 
 
    padding: 1em; 
 
    width: 200px; 
 
} 
 

 
.outer-item { 
 
    background: #f9f3f3; 
 
    border: 1px solid #e1c5c5; 
 
    padding: 1em; 
 
} 
 

 
.outer-item:not(:last-child) { 
 
    margin-bottom: 1em; 
 
} 
 

 
.inner-item { 
 
    background: #f6f6f6; 
 
    border: 1px solid #c5c5c5; 
 
    padding: 0.5em; 
 
} 
 

 
.inner-item:not(:last-child) { 
 
    margin-bottom: 0.5em; 
 
} 
 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
 
#sortable li span { position: absolute; margin-left: -1.3em; }

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<ul class="sortable outer"> 
 
    <li class="outer-item draggable"> 
 
     <ul class="sortable"> 
 
      <li class="inner-item draggable"></span>Item 1</li> 
 
      <li class="inner-item draggable"></span>Item 2</li> 
 
      <li class="inner-item"></span>Item 3 (Disabled)</li> 
 
     </ul> 
 
    </li> 
 
    <li class="outer-item draggable"> 
 
     <ul class="sortable"> 
 
      <li class="inner-item draggable"></span>Item 4</li> 
 
      <li class="inner-item draggable"></span>Item 5</li> 
 
      <li class="inner-item draggable"></span>Item 6</li> 
 
     </ul> 
 
    </li> 
 
</ul>