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

Question

我想制作一个带有水平和垂直引导线的 div，它也可以拖动，这是我目前正在研究的 fiddle :

澄清一下:

我不想只有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]
    });
});

Answer 1

你的问题有点模糊，但似乎可拖动 block 没有与网格正确对齐，而且它不是从左上角开始的。要解决这些问题，您需要像这样在可拖动框的大小中考虑边框:

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

并且您需要从 body 元素中删除边距以使 block 与左上角对齐，如下所示:

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

这是包含上述更正的 fiddle 的链接:http://jsfiddle.net/y59fL/3/

评论后编辑:

一个新的 fiddle :http://jsfiddle.net/y59fL/10/