0

I'm using jQuery drag and droppable to create a list of tiles plus a draggable widget which can be dropped in any of the tiles.

Each tile has a border but the widget doesn't, so although they are both the same size, when I drop the widget into the tile it snaps to the bottom left of the tile's border. Thus there is two pixels spare on the top of the tile.

Here's a fiddle http://jsfiddle.net/gztQM/

and some 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 an example of the 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 I get it to snap to inside the border? I've tried adding margins and paddings but to no avail. Can't see anything mentioning this on the jquery site either

Help! :)

1 Answer 1

1

Update:

It appears that the draggable object always snaps to the edge of droppable container, covering the border. This does not appear to be affected by box-sizing as I had previously mentioned. This behavior can even be seen in the jQuery UI example.

Your best bets are to remove the border completely, modify the behavior of the jQuery UI method to behave the way you want, or wrap each one of your droppable containers in a div that provides the margin and border styles (and remove those from the droppable container itself).

jsfiddle (Wrapped Example)

Original Answer:

I believe this might have to do with the border actually affecting the inner snapping (snapMode:'inner') of the boxes due to the box model.

You can get around that by either not having a border on the boxes or by using box-sizing: border-box which will change how the box model behaves. Keep in mind, that versions of IE before IE8 do not support using box-sizing without a polyfill.

div[id^="row"] {
    float:left;
    width:65px;
    height:65px;
    margin:5px;
    border:1px solid #454545;
    background-color:#262e41;
    /* support Firefox, WebKit, Opera and IE8+ */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

jsfiddle

3
  • 1
    Hey there, thanks for the reply. I tried this but it just makes the droppable areas smaller. So that when the link is dropped in there then it covers over the border. If I make the droppable slightly bigger to compensate the problem of the offset comes back Feb 13, 2013 at 13:05
  • @ZaphodBeeblebrox You are correct. I have added an update section to my answer with a work-around. This seems to be the default behavior of droppable and draggable with no apparent exposed option. Feb 13, 2013 at 14:16
  • Yeah, thanks for helping me out with this, looks like it can't happen the way I was hoping. I reckon I'll do the wrapper around the tile with styles. Thanks again for the help friend Feb 13, 2013 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.