我使用GridPak生成的48列网格渲染48 1＆＃34; span＆＃34;列用于说明12小时内15分钟的时间段。
我希望能够拖动15分钟的块来增加持续时间。我使用jQueryUI resizeable来处理resize。问题是我需要检测我调整列大小时传递的列数。这样，当stop事件触发时，我可以确定需要跨越多少列并从列表中删除它们以防止它溢出。
在下面的代码段中，我使用elementFromPoint()来确定哪个元素对应于元素位置，但它只返回jQueryUI辅助元素，因为它是最顶层的元素。
有没有更好的方法来返回位于调整大小的列下方的元素？
$(".col").resizable({
helper: "ui-resizable-helper",
maxHeight: 20,
minHeight: 20,
grid: 40,
handles: 'e',
resize: function(event, ui) {
console.log($(document.elementFromPoint(ui.position.left + ui.size.width, ui.position.top)));
console.log(ui.position.left + ui.size.width);
}
}); body {
margin: 0;
}
.col {
background: #333;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ui-resizable-helper {
outline: 1px dotted #0f0;
}
/*!
* Gridpak Beta CSS
*
* Generator - http://gridpak.com/
* Created by @erskinedesign
*/
/* Reusable column setup */
.col {
border: 0px solid rgba(0, 0, 0, 0);
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
}
/* 1. 48 Column Grid 0px - Infinity
-----------------------------------------------------------------------------
Span 1: 2.08333333333%
Span 2: 4.16666666667%
Span 3: 6.25%
Span 4: 8.33333333333%
Span 5: 10.4166666667%
Span 6: 12.5%
Span 7: 14.5833333333%
Span 8: 16.6666666667%
Span 9: 18.75%
Span 10: 20.8333333333%
Span 11: 22.9166666667%
Span 12: 25.0%
Span 13: 27.0833333333%
Span 14: 29.1666666667%
Span 15: 31.25%
Span 16: 33.3333333333%
Span 17: 35.4166666667%
Span 18: 37.5%
Span 19: 39.5833333333%
Span 20: 41.6666666667%
Span 21: 43.75%
Span 22: 45.8333333333%
Span 23: 47.9166666667%
Span 24: 50.0%
Span 25: 52.0833333333%
Span 26: 54.1666666667%
Span 27: 56.25%
Span 28: 58.3333333333%
Span 29: 60.4166666667%
Span 30: 62.5%
Span 31: 64.5833333333%
Span 32: 66.6666666667%
Span 33: 68.75%
Span 34: 70.8333333333%
Span 35: 72.9166666667%
Span 36: 75.0%
Span 37: 77.0833333333%
Span 38: 79.1666666667%
Span 39: 81.25%
Span 40: 83.3333333333%
Span 41: 85.4166666667%
Span 42: 87.5%
Span 43: 89.5833333333%
Span 44: 91.6666666667%
Span 45: 93.75%
Span 46: 95.8333333333%
Span 47: 97.9166666667%
Span 48: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 0px) {
.row {
margin-left: -1px;
}
.col {
border-left-width: 1px;
padding: 0 0%;
}
/*
Add your semantic classnames in alongside their corresponding spans here. e.g.
.span_3,
.my_semantic_class_name {
...
}
*/
.span_1 {
width: 2.08333333333%;
}
.span_2 {
width: 4.16666666667%;
}
.span_3 {
width: 6.25%;
}
.span_4 {
width: 8.33333333333%;
}
.span_5 {
width: 10.4166666667%;
}
.span_6 {
width: 12.5%;
}
.span_7 {
width: 14.5833333333%;
}
.span_8 {
width: 16.6666666667%;
}
.span_9 {
width: 18.75%;
}
.span_10 {
width: 20.8333333333%;
}
.span_11 {
width: 22.9166666667%;
}
.span_12 {
width: 25.0%;
}
.span_13 {
width: 27.0833333333%;
}
.span_14 {
width: 29.1666666667%;
}
.span_15 {
width: 31.25%;
}
.span_16 {
width: 33.3333333333%;
}
.span_17 {
width: 35.4166666667%;
}
.span_18 {
width: 37.5%;
}
.span_19 {
width: 39.5833333333%;
}
.span_20 {
width: 41.6666666667%;
}
.span_21 {
width: 43.75%;
}
.span_22 {
width: 45.8333333333%;
}
.span_23 {
width: 47.9166666667%;
}
.span_24 {
width: 50.0%;
}
.span_25 {
width: 52.0833333333%;
}
.span_26 {
width: 54.1666666667%;
}
.span_27 {
width: 56.25%;
}
.span_28 {
width: 58.3333333333%;
}
.span_29 {
width: 60.4166666667%;
}
.span_30 {
width: 62.5%;
}
.span_31 {
width: 64.5833333333%;
}
.span_32 {
width: 66.6666666667%;
}
.span_33 {
width: 68.75%;
}
.span_34 {
width: 70.8333333333%;
}
.span_35 {
width: 72.9166666667%;
}
.span_36 {
width: 75.0%;
}
.span_37 {
width: 77.0833333333%;
}
.span_38 {
width: 79.1666666667%;
}
.span_39 {
width: 81.25%;
}
.span_40 {
width: 83.3333333333%;
}
.span_41 {
width: 85.4166666667%;
}
.span_42 {
width: 87.5%;
}
.span_43 {
width: 89.5833333333%;
}
.span_44 {
width: 91.6666666667%;
}
.span_45 {
width: 93.75%;
}
.span_46 {
width: 95.8333333333%;
}
.span_47 {
width: 97.9166666667%;
}
.span_48 {
margin-left: 0;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="page">
<div class="row">
<div class="header col span_1">1</div>
<div class="header col span_1">2</div>
<div class="header col span_1">3</div>
<div class="header col span_1">4</div>
<div class="header col span_1">5</div>
<div class="header col span_1">6</div>
<div class="header col span_1">7</div>
<div class="header col span_1">8</div>
<div class="header col span_1">9</div>
<div class="header col span_1">10</div>
<div class="header col span_1">11</div>
<div class="header col span_1">12</div>
<div class="header col span_1">13</div>
<div class="header col span_1">14</div>
<div class="header col span_1">15</div>
<div class="header col span_1">16</div>
<div class="header col span_1">17</div>
<div class="header col span_1">18</div>
<div class="header col span_1">19</div>
<div class="header col span_1">20</div>
<div class="header col span_1">21</div>
<div class="header col span_1">22</div>
<div class="header col span_1">23</div>
<div class="header col span_1">24</div>
<div class="header col span_1">25</div>
<div class="header col span_1">26</div>
<div class="header col span_1">27</div>
<div class="header col span_1">28</div>
<div class="header col span_1">29</div>
<div class="header col span_1">30</div>
<div class="header col span_1">31</div>
<div class="header col span_1">32</div>
<div class="header col span_1">33</div>
<div class="header col span_1">34</div>
<div class="header col span_1">35</div>
<div class="header col span_1">36</div>
<div class="header col span_1">37</div>
<div class="header col span_1">38</div>
<div class="header col span_1">39</div>
<div class="header col span_1">40</div>
<div class="header col span_1">41</div>
<div class="header col span_1">42</div>
<div class="header col span_1">43</div>
<div class="header col span_1">44</div>
<div class="header col span_1">45</div>
<div class="header col span_1">46</div>
<div class="header col span_1">47</div>
<div class="header col span_1">48</div>
</div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>