javascript - How to fix a div in sortable grid in jquery -

in above image hexagons movable, except blue centre hexagon. want fix blue hexagon @ centre, while other hexagon can move anywhere. don't understand how this. more clarity, want fix blue hexagon @ 7th position.

my code is

$("#sortable").sortable({     cursor: 'move',     items: 'div.sort', }).disableselection(); 

html

 <div class="col-sm-12 margin-top-100 margin-left-100" id="sortable">     <div id="c_1" class="hexagon hexagon2 sort">         <div class="hexagon-in1">            <div class="hexagon-in2">               <div class="inner inner-left text-center"><i class="fa fa-eye"> </i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>               </div>            </div>          </div>      <div id="c_2"  class="hexagon hexagon2 sort">        <div class="hexagon-in1">          <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>     </div>   </div>    <div id="c_3"  class="hexagon hexagon2 sort">     <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div> </div> </div> <div id="c_4"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>    </div> </div>  <div id="c_5"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div>  </div> <div id="c_6"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>   </div>  </div> <div id="c_7"  class="hexagon hexagon2" > <div class="hexagon-in1">     <div class="hexagon-in2" id="kinglinkr">         <div class="inner inner-left text-center"><i class="fa fa-trash"></i></div><div class="inner inner-right text-center"><i class="fa fa-thumbs-up"></i></div>     </div>  </div>  </div>  <div id="c_8"  class="hexagon hexagon2 sort">   <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div> </div> </div> <div id="c_9"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div> </div> </div>  <div id="c_10"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div> </div> <div id="c_11"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>   </div>  </div>  <div id="c_12"  class="hexagon hexagon2 sort">  <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div>  </div>  <div id="c_13"  class="hexagon hexagon2 sort">  <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div>  </div>   <div id="c_14"  class="hexagon hexagon2 sort">  <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div>  </div> <div id="c_15"  class="hexagon hexagon2 sort"> <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div>  </div>  <div id="c_16"  class="hexagon hexagon2 sort">  <div class="hexagon-in1">     <div class="hexagon-in2">         <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>     </div>  </div>  </div>   </div> 

please me. appreciated. thanks.

i added on fiddle don't know why drag not working

https://jsfiddle.net/vinie23/2jsqmgw2/

give class blue hexagons , use items like:

$(".sortable").sortable({       items: "li:not(.unsortable)" //unsortable class blue     });