Question

我想制作一个带水平和垂直引导线的div，它也是可拖动的，这是我目前正在努力的小提琴：

只是为了澄清：

我不仅想要div的边框，而是要占用整个文档。

我怎样才能让它发挥作用？我现在只在左侧工作，然后我会对其他方面做同样的事情......

这是代码：

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 { 
    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/

如何使用引导线制作div？

1 个答案: