Столкнулся со странным поведением некоторых элементов
Небольшая поясняющая картинка и комментарии
Сразу приведу кусок разметки
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
1. div с текстом new layer "липнет" к правому краю. Все перепробовал, кто, или что его застявляет так отображаться — не нашел.
2. Чтобы "дотянуться" в CSS из input-а до div.layer приходится использовать parent = self.parent().parent(); хотя по идее должен работать просто parent() ?
3. При дропе элемента он отрисовывается в т.ч. и за самом popup-ом
4. Двойной клик в popup-e не отрабатывается
5. Drag-and-drop не корректно работают с элементами tr. При перетаскивании элемент, который собрались таскать не исчезает. Исчезает как раз то что должно отображаться, виден только бордюр (в данном случае)
6. Как сбросить аттрибут, пробую HTMLayoutSetAttributeByName передавая null, пустую строку — не работает. Устанавливается лекго, а обнуляться не хочет.
Тестовый файл полностью
<html>
<head>
<style>
body
{
context-menu: selector(div#ctxMenu);
}
div.listHolder
{
width: 160px;
overflow-x: hidden;
overflow-y: auto;
vertical-scrollbar: vertical-scrollbar;
border-top: solid 1px #4D4D4D;
border-bottom: solid 1px #4D4D4D;
background-color: rgba(0, 0, 0, 0.8);
}
#layers_list
{
padding: 0px;
margin: 0px;
accept-drop: selector(div.layer);
}
div.layer
{
flow: horizontal;
behavior: button;
height: 25px;
color: white;
font-size: 10px;
border-bottom: solid 1px #4D4D4D;
draggable: only-move;
click!: $1(div.layer[selected]).selected = null,
self.selected = true;
}
div.layer[hidden]
{
color: gray;
}
div.layer[selected]
{
background-color: #5EB8D6;
assigned!: $1(div.layer[selected]).selected = null,
self.selected = true;
}
div.title
{
border: solid 1px;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
div.delete
{
width: 18px;
height: 18px;
behavior: button;
cursor: pointer;
padding: 0px;
margin: 0px;
margin-top: 2px;
background-image: url("../images/Layers/delete.png");
border: solid 1px;
}
input[type=checkbox]
{
width: 18px;
height: 18px;
padding: 0px;
margin: 0px;
margin-top: 4px;
padding-right: 6px;
assigned!: self.parent().parent().hidden = true;
}
input[type=checkbox]:checked
{
assigned!: parent = self.parent().parent(),
parent.hidden = null;
}
table.dragable
{
accept-drop: selector(tr);
}
table.dragable tr
{
border-bottom: solid 1px;
draggable: only-move;
}
</style>
</head>
<body>
<div id="ctxMenu" style="display: none;">
<div class='listHolder'>
<div id="layers_list">
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
</div>
</div>
</div>
<table class="dragable">
<tr>
<td>1. Drag me!</td>
<tr>
<tr>
<td>2. Drag me!</td>
<tr>
<tr>
<td>3. Drag me!</td>
<tr>
</table>
</body>
</html>
