Отменить выполнение sortabble в jQuery ui при клике на определенную часть объекта

Question

Есть несколько перетаскиваемых объектов. Как сделать чтобы при перетаскивание срабатывало при перетаскивании за синий блок и не перетаскивалось за красный.

$(document).ready(function(){
 $('.sort-box').sortable()
});

.sort-box{
  width: 300px;
}
.sort-item{
  width: 100%;
}
.red{
  height: 20px  ;
  display: block;
  width: 50%;
  background: red;
}
.blue{
  height: 20px  ;
  display: block;
  width: 50%;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul class="sort-box">
  <li class="sort-item">
    <span class="red"></span>
    <span class="blue"></span>
  </li>
  <li class="sort-item">
    <span class="red"></span>
    <span class="blue"></span>
  </li>
  <li class="sort-item">
    <span class="red"></span>
    <span class="blue"></span>
  </li>
</ul>

Answer 1

Параметр handle:

$('.sort-box').sortable({
   handle: '.blue'  
})

Параметр cancel:

$('.sort-box').sortable({
   cancel: '.red'  
})

$(document).ready(function(){
    $('.sort-box').sortable({
      handle: '.blue'  
    })
});

.sort-box{
  width: 300px;
}
.sort-item{
  width: 100%;
}
.red{
  height: 20px  ;
  display: block;
  width: 50%;
  background: red;
}
.blue{
  height: 20px  ;
  display: block;
  width: 50%;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul class="sort-box">
  <li class="sort-item">
    <span class="red"></span>
    <span class="blue"></span>
  </li>
  <li class="sort-item">
    <span class="red"></span>
    <span class="blue"></span>
  </li>
  <li class="sort-item">
    <span class="red"></span>
    <span class="blue"></span>
  </li>
</ul>