jquery - 如何制作带有指导线的div？

我想用水平和垂直的引导线做一个div，它也可以拖动，这是我现在正在做的小提琴：
只是为了澄清：
我不想只看到div的边界，而是要占据整个文档。
http://jsfiddle.net/y59fL/2/
我怎样才能成功？我现在只在左边工作，然后我也会在另一边工作。。。
这是代码：
HTML格式

<div class="demo">

<div id="draggable-block" class="draggable">
    <div class="left-guideline">
    <div class="block"></div>
</div>

</div>

CSS

.draggable { width: 100px; height: 100px; float: left; margin: 0 10px 10px 0; font-size: .9em;}
.block {
    margin: 0;
    background-color: #eee;
    height: 100px;
    width: 100px;
    border-left: 1px solid black;
    overflow: visible;
}

.left-guideline {
    overflow: visible;
    height: 100%;
    width: 1px;
    background-color: black;
    position: absolute;
}

#snaptarget { height: 80px; }

body, html{
  background: url('http://puu.sh/6Bksm.png') repeat;
  background-size: 10px;
  background-color: rgba(255,255,255,0.1);
}

Javascript/jQuery

$(function() {
    $("#draggable-block").draggable({
        grid: [10, 10]
    });
});

最佳答案

您的问题有点含糊，但似乎可拖动的块没有与网格正确对齐，并且它没有从左上角开始。要解决这些问题，需要考虑可拖动框大小中的边框，如下所示：

.block {
    margin: 0;
    background-color: #eee;
    height: 98px;
    width: 98px;
    border: 1px solid black;
    overflow: visible;
}

您需要从body元素中移除边距以将块与左上角对齐，如下所示：

body, html{
  background: url('http://puu.sh/6Bksm.png') repeat;
  background-size: 10px;
  background-color: rgba(255,255,255,0.1);
  margin: 0;
}

这里有一个链接，指向一个小提琴，上面有修正：http://jsfiddle.net/y59fL/3/
评论后编辑：
新小提琴：http://jsfiddle.net/y59fL/10/