javascript - jQuery UI Snappable Not Returning only Inner Snaps with SnapMode Set -

when set draggable object snap span (doing inner-snaps only) seeing returning adjacent snaps, despite being outside of them. notice snapmode, important part:

$(".draggable").draggable({     snap: ".snap",     snapmode: "inner",     stop: function(event, ui) {          /* possible snap targets: */         var snapped = $(this).data('draggable').snapelements;          /* pull out snap targets "snapping": */         var snappedto = $.map(snapped, function(element) {             return element.snapping ? element.item : null;         });          /* display results: */         var result= '';         $.each(snappedto, function(idx, item) {             result += $(item).text() + ", ";         });          $("#results").html("snapped to: " + (result === '' ? "nothing!" : result));     } }); 

this based upon question:how find out "snapped to" element jquery ui draggable elements on snap

i need "snappable" areas next each other per design i'm trying build towards, so:

my jsfiddle demonstrating issue here: http://jsfiddle.net/myingling/dx54dapr/1/

(try snapping snap 2 , you'll see says it's snapping both snap 1 , snap 2!)

snap mode check whether element should snap other elements. snapmode determines edges of snap elements draggable snap to. need put gap between boxes , can use snaptolerance.

$(".draggable").draggable({      snap: ".snap",      snapmode: "inner",      stop: function(event, ui) {           /* possible snap targets: */          var snapped = $(this).data('ui-draggable').snapelements;                   /* pull out snap targets "snapping": */          var snappedto = $.map(snapped, function(element) {              return element.snapping ? element.item : null;          });                   /* display results: */          var result= '';          $.each(snappedto, function(idx, item) {              result += $(item).text() + ", ";          });                    $("#results").html("snapped to: " + (result === '' ? "nothing!" : result));      }  });

.draggable {       width: 90px;       height: 80px;       padding: 5px;       font-size: .9em;   }    .snap {       width: 300px;       height: 100px;      margin-top: 50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script    src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"    integrity="sha256-xnjb53/ry+wmg+4l6ttl9m6ppqknwzvrt0ro1srnjzw="    crossorigin="anonymous"></script>  <link href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css" rel="stylesheet"/>    <div id="snap-one" class="snap ui-widget-header">snap 1</div>  <div id="snap-two" class="snap ui-widget-header">snap 2</div>    <div class="demo">      <br clear="both" />            <div id="draggable" class="draggable ui-widget-content">          <p>oh snap!</p>      </div>      <div id="results"></div>  </div>