Вы можете использовать псевдоэлемент, в котором вы применяете анимацию с пунктирной рамкой
.inner_wrap {
max-width: 1140px;
margin: 0 auto;
}
html,
body {
font-family: 'Asap', sans-serif;
margin: 0;
height: 100%;
overflow: hidden;
}
.boundary {
width: 5%;
height: 50px;
background-color: steelblue;
}
.occupied0 {
background-color: #1b4d15;
color: #fff;
}
.occupied1 {
background-color: red;
color: #FFF;
}
.short {
width: 32%;
height: 40px;
display: block;
margin: 10px 0px 10px 10px;
line-height: 40px;
text-align: left;
padding-left: 10%;
}
.long {
width: 76%;
height: 40px;
display: block;
margin: 10px 0px 10px 10px;
line-height: 40px;
text-align: left;
padding-left: 10%;
}
td.range_supervisor {
background-color: #663300;
width: 12%;
padding: 35px;
background-clip: content-box;
}
table {
background-color: white;
text-align: left;
border: 0px;
border-collapse: collapse;
width: 100%;
text-align: center;
vertical-align: middle;
}
table>tr>td {
width: 25%;
}
tr:first-child td:first-child:before {
content:"";
position:absolute;
top:0;
left:20px;
right:20px;
height:60px;
background:
linear-gradient(90deg, blue 50%, transparent 50%) 0 0,
linear-gradient(90deg, blue 50%, transparent 50%) 100% 100%,
linear-gradient(0deg, blue 50%, transparent 50%) 100% 0,
linear-gradient(0deg, blue 50%, transparent 50%) 0 100%;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
transition: background-position 2s;
}
tr:first-child:hover td:first-child:before{
background-position: 200px 0, calc(100% - 200px) 100%, 100% 50px,0 calc(100% - 50px);
}
<table class="inner_wrap">
<tr>
<td>
</td>
<td style="width:25%;">
<button>RANGE 1</button>
</td>
<td class="boundary"></td>
<td id="range1" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 2</button>
</td>
<td class="boundary"></td>
<td id="range2" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 3</button>
</td>
<td class="boundary"></td>
<td id="range3" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 4</button>
</td>
<td class="boundary"></td>
<td id="range4" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td class="range_supervisor" rowspan="4">
<button style=" writing-mode: vertical-lr;
text-orientation: upright;">supervisor</button>
</td>
<td>
<button>RANGE 5</button>
</td>
<td class="boundary"></td>
<td id="range5" class="long occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
<button>RANGE 6</button>
</td>
<td class="boundary"></td>
<td id="range6" class="long occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
<button>RANGE 7</button>
</td>
<td class="boundary"></td>
<td id="range7" class="long occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
<button>RANGE 8</button>
</td>
<td class="boundary"></td>
<td id="range8" class="long occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 9</button>
</td>
<td class="boundary"></td>
<td id="range9" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 10</button>
</td>
<td class="boundary"></td>
<td id="range10" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 11</button>
</td>
<td class="boundary"></td>
<td id="range11" class="short occupied0">
AVAILABLE
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>RANGE 12</button>
</td>
<td class="boundary"></td>
<td id="range12" class="short occupied0">
AVAILABLE
</td>
</tr>
</table>
Один из способов сделать это:
$(document).ready(function() {
$("#container").droppable({
accept: '.product',
drop: function(event, ui) {
$(this).append($("ui.draggable").clone());
$("#container .product").addClass("item");
$(".item").removeClass("ui-draggable product");
$(".item").draggable({
containment: 'parent',
grid: [150,150]
});
}
});
$(".product").draggable({
helper: 'clone'
});
});
Но я не уверен, хорошее ли это и чистое кодирование.
Я нашел этот вопрос через Google. Я также не мог удерживать позиции от привязки к контейнеру, пока я не изменил ui.draggable на ui.helper при добавлении:
$(this).append($(ui.helper).clone());
Для тех, кто пытается переместить упавший предмет. Взгляните сюда.
Перетаскивание и клонирование JQuery .
Мне действительно пришлось использовать для этого код, похожий на
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
.