Перетащите с помощью Dragula и шрифта удивительный вертикальный многоточие - PullRequest
Новая
       25

Перетащите с помощью Dragula и шрифта удивительный вертикальный многоточие

0 голосов
/ 25 октября 2019

У меня есть клетка, которую можно перетаскивать. Внутри ячейки у меня есть значок с многоточием. Когда я нацеливаю курсор прямо на вертикальные эллипсы, я не могу переместить ячейку, но если я наведу курсор где-нибудь еще внутри ячейки, я смогу переместить ячейку. Мне нужна помощь, чтобы узнать, что мне нужно сделать, чтобы сделать многоточие вертикалью подвижным. Вот часть HTML и CSS у меня есть. 

 <td width="1%" class="dnd-control-data-reorder-handle">
         <i class="fas fa-ellipsis-v dnd-control-data-reorder-handle" aria-hidden="true"></i>
    </td>


tr.re-orderable:hover td.dnd-control-data-reorder-handle svg{
    visibility: visible;
    color: #7d7d7d;
}

.dnd-control-data-reorder-handle svg{
    visibility: hidden;
    display: inline-block;
}

.dnd-control-data-reorder-handle{
    vertical-align: middle;
}

.dnd-control-data-reorder-handle:hover{
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;

}

.dnd-control-data-reorder-handle:active{
    cursor: move;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.gu-mirror{
    width: 100px !important;
    opacity: 1;
    cursor: move;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.gu-mirror td:not(.gu-mirror-show) {
    display: none;
}

.gu-mirror-show{
    display: none;
}

.gu-mirror .gu-mirror-show{
    display:block;
}

.gu-mirror .card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.gu-mirror .card-block{
    height: 30px;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 25px;
}
[![enter image description here][1]][1]
...