我想用CSS创建一个" grip"用于表示元素可拖动的背景。 (见https://ux.stackexchange.com/a/34639/39138)
目前我有一个dnd
类用于该项,CSS看起来像:
.dnd {
background: #99bbee; /* would like to be able to change this dynamically */
padding: 1em;
margin: 2em;
border-radius: 0.25em;
width: 14em;
transition: all 0.25s;
}
.dnd:hover {
box-shadow: 0.25em 0.25em 0.3em rgba(0,0,0,0.2);
margin: 1.75em 2.1em 2.25em 1.9em;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.dnd:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.dnd::before { /* the grip */
content: " ";
display: inline-block;
width: 1.5em;
height: 2em;
margin: -0.5em 0.75em -0.5em -0.5em;
background-color: transparent;
background-size: 0.5em 0.5em;
background-position: 0 0;
/* Background image - unfortunately requires background color */
background-image:
-webkit-linear-gradient(#99bbee 50%, transparent 50%),
-webkit-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
-moz-linear-gradient(#99bbee 50%, transparent 50%),
-moz-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
-o-linear-gradient(#99bbee 50%, transparent 50%),
-o-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
linear-gradient(#99bbee 50%, transparent 50%),
linear-gradient(to right, rgba(0,0,0,0.2) 50%, transparent 50%);
}
...这可以在夹子上创建几个方框作为背景,但我不希望夹具伪元素依赖于硬编码的背景颜色(在这种情况下为#99bbee
;它可以使用rgba(0,0,0,0.2)
)。有没有办法重写这个CSS背景图像,以便它更灵活w / r / t背景颜色?
这是一个jsfiddle:https://jsfiddle.net/luken/r69wfwjd/5/
答案 0 :(得分:0)
您可以使用伪元素的多个阴影来获得此效果:
.dnd {
background: tomato;
padding: 1em;
margin: 2em;
border-radius: 0.25em;
width: 14em;
transition: all 0.25s;
font-family: Arial;
}
.dnd::before {
content: " ";
display: inline-block;
width: 0.5em;
height: 0.5em;
margin: 0em 1.5em 0em -1em;
background-color: transparent;
box-shadow: 0.5em -1em 0 gray,
0.5em -0.25em 0 gray,
0.5em 0.5em 0 gray,
0.5em 1.25em 0 gray,
1.25em -1em 0 gray,
1.25em -0.25em 0 gray,
1.25em 0.5em 0 gray,
1.25em 1.25em 0 gray;
}

<div class="dnd">
Thing that can be dragged
</div>
&#13;
我创建了一个片段,其中网格始终是背景的较暗版本。
有2个对角线渐变,用于创建正方形
.dnd {
background: tomato;
padding: 1em;
margin: 2em;
border-radius: 0.25em;
width: 14em;
transition: all 0.25s;
font-family: Arial;
}
.dnd::before {
content: " ";
display: inline-block;
width: 1.5em;
height: 2em;
margin: -0.5em 0.75em -0.5em -0.5em;
background-color: transparent;
background-size: 0.5em 0.5em;
background-position: 0 0, 0.25em 0.25em;
background-image:
linear-gradient(45deg, rgba(0,0,0,0.7) 0.1768em, transparent 0.1767em),
linear-gradient(225deg, rgba(0,0,0,0.7) 0.1768em, transparent 0.1767em);
}
&#13;
<div class="dnd">
Thing that can be dragged
</div>
&#13;
答案 1 :(得分:0)
我认为最好的选择可能是SVG图像背景。
事实上,如果您在编写答案时查看stackoverflow自己的抓握以扩展textarea(.grippie
),它会使用SVG background。
因此,我们的想法是使用带有background
和data uri的css url(...)
属性作为网址。
SVG代码取自here。
.grip {
background-size: cover;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg==");
width: 10px;
height: 15px;
cursor: grab;
cursor: -webkit-grab;
margin: 0.5em;
}
.container {
display: flex;
align-items: center;
}
<div class="container" draggable="true">
<div class="grip"></div>
<div class="content">A thing with a grip</div>
</div>
<div class="container" draggable="true">
<div class="grip"></div>
<div class="content">A thing with a grip</div>
</div>
答案 2 :(得分:0)
如果您使用一组简单的点,例如....
,然后将它们旋转90度,然后打开文本阴影以重复它们,那么只需很少的CSS即可实现。
i.grip::after
{
content: "....";
display: inline-block;
color: #AAA;
font-style: normal;
font-family: sans-serif;
font-size:15px;
font-weight: bold;
transform: rotate(90deg);
text-shadow: 0px -4px 0px #AAA;
cursor:move;
margin-right:5px;
}
<div><i class="grip"></i> Drag Me By My Handle</div>