javascript - jquery Drag and Drop - droppable area has border and draggable item won't snap to the inside of this border -

javascript - jquery Drag and Drop - droppable area has border and draggable item won't snap to the inside of this border -

i'm using jquery drag , droppable create list of tiles plus draggable widget can dropped in of tiles.

each tile has border widget doesn't, although both same size, when drop widget tile snaps bottom left of tile's border. there 2 pixels spare on top of tile.

here's fiddle http://jsfiddle.net/gztqm/

and code:

div[id^="row"] {float:left; width:65px; height:65px; margin:5px;border:1px solid #454545; background-color:#262e41;} .bookmark {float:left; width:65px; height:65px; background-color:#edff57;cursor: move;display:block; margin:-1px 0px 0px -1px;} .bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}

here's illustration of droppable areas (tiles)

<div class="position" id="row-2col-1"></div>

the draggable link

<a href class="bookmark"></a>

the js

$('.bookmark').draggable({containment: '#content', snap:'.position', snapmode:'inner', revert:'invalid',snaptolerance: 32}); $('.position').droppable({drop: handledropevent, accept:'.bookmark'}); function handledropevent( event, ui ) { var draggable = ui.draggable; }

how can snap within border? i've tried adding margins , paddings no avail. can't see mentioning on jquery site either

help! :)

update:

it appears draggable object snaps border of droppable container, covering border. not appear affected box-sizing had mentioned. behavior can seen in jquery ui example.

your best bets remove border completely, modify behavior of jquery ui method behave way want, or wrap each 1 of droppable containers in div provides margin , border styles (and remove droppable container itself).

jsfiddle (wrapped example)

original answer:

i believe might have border affecting inner snapping (snapmode:'inner') of boxes due box model.

you can around either not having border on boxes or using box-sizing: border-box alter how box model behaves. maintain in mind, versions of ie before ie8 not back upwards using box-sizing without polyfill.

div[id^="row"] { float:left; width:65px; height:65px; margin:5px; border:1px solid #454545; background-color:#262e41; /* back upwards firefox, webkit, opera , ie8+ */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

jsfiddle

javascript jquery draggable droppable