JQuery UI 当隐藏的目标区域位于下方时,可排序项目未检测到固定目标区域
JQuery UI Sortable item is not detecting a fixed target area when a hidden target area is underneath
我正在尝试创建一个固定位置的 sortable 菜单,其中右侧的目标区域可以在固定菜单后面进行水平滚动。我面临的问题是,当我尝试将项目从固定菜单拖动到目标或反之时,它工作得很好,直到我滚动并且目标区域位于固定菜单后面。发生这种情况时,将项目拖动到固定菜单不起作用,因为该项目被放到位于固定菜单后面的目标区域。
这是一个演示问题的 jsfiddle:
https://jsfiddle.net/geraldclark/ojkgbLv9/45/
<body>
<table>
<thead>
<tr>
<th>Fixed Menu</th>
<th>Sortable 1</th>
<th>Sortable 2</th>
<th>Sortable 3</th>
<th>Sortable 4</th>
<th>Sortable 5</th>
<th>Sortable 6</th>
<th>Sortable 7</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
table {
position: relative;
width: 200px;
overflow: hidden;
border-collapse: collapse;
}
ul {
padding: 0px;
margin: 0px;
height: 200px;
}
li {
list-style-type: none;
}
thead {
position: relative;
display: block;
width: 300px;
overflow: visible;
}
thead th {
background-color: grey;
min-width: 120px;
border: 1px solid #222;
}
thead th:nth-child(1) {
position: relative;
display: block;
}
tbody {
position: relative;
display: block;
width: 700px;
height: 239px;
overflow: scroll;
}
tbody td {
min-width: 120px;
border: 1px solid #222;
height: 200px;
vertical-align: top;
background-color: white;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
vertical-align: top;
}
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
});
$('.sortable').sortable({
connectWith: '.sortable',
scroll: false,
helper: 'clone',
appendTo: 'body',
});
});
(注意:您可能需要展开视图才能使 table 正确滚动)
- 我可以从 "Fixed Menu" 拖动到 "Sortable 1"
- 我可以从 "Sortable 1" 拖动到 "Fixed Menu"
- 当我滚动到 "Sortable 6" 并尝试将 "Item 31" 拖到 "Fixed Menu" 时,它会掉到它后面的其他 sortable 项目之一。
我也试过将其移植到固定的 div,但没有成功。有什么想法吗?
这似乎是可排序界面选择后排列表而不是前排列表的问题。
这是一个应该有效的解决方案。每当滚动时,等着看这个人是否已经停止滚动。然后计算某列是否被固定列覆盖,如果是则将其更改为不可排序,否则将其设置为可排序。
这是 fiddle:
https://jsfiddle.net/kd8zpo96/1/
我在前面fiddle中添加的主要功能是这样的:
var isColliding = function( $element1, $element2 ) {
var allowableOverlap = 5;
var element1RightDistance = $element1.offset().left
+ $element1.outerWidth( true );
//Only care if the Right border of the fixed column is overtop the scrollable column
return (element1RightDistance > $element2.offset().left + allowableOverlap );
};
$('tbody').scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
//Don't call the function unless stopped for a little bit.
$.data(this, 'scrollTimer', setTimeout(function() {
$('.scrollableColumn').each(function(index, element){
var $element = $(element);
var colliding = isColliding($('.fixedColumn'), $element);
$element.find('.sortable').sortable( "option", "disabled", colliding );
})
}, 250));
});
我正在尝试创建一个固定位置的 sortable 菜单,其中右侧的目标区域可以在固定菜单后面进行水平滚动。我面临的问题是,当我尝试将项目从固定菜单拖动到目标或反之时,它工作得很好,直到我滚动并且目标区域位于固定菜单后面。发生这种情况时,将项目拖动到固定菜单不起作用,因为该项目被放到位于固定菜单后面的目标区域。
这是一个演示问题的 jsfiddle:
https://jsfiddle.net/geraldclark/ojkgbLv9/45/
<body>
<table>
<thead>
<tr>
<th>Fixed Menu</th>
<th>Sortable 1</th>
<th>Sortable 2</th>
<th>Sortable 3</th>
<th>Sortable 4</th>
<th>Sortable 5</th>
<th>Sortable 6</th>
<th>Sortable 7</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
</ul>
</td>
<td>
<ul class="sortable">
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
table {
position: relative;
width: 200px;
overflow: hidden;
border-collapse: collapse;
}
ul {
padding: 0px;
margin: 0px;
height: 200px;
}
li {
list-style-type: none;
}
thead {
position: relative;
display: block;
width: 300px;
overflow: visible;
}
thead th {
background-color: grey;
min-width: 120px;
border: 1px solid #222;
}
thead th:nth-child(1) {
position: relative;
display: block;
}
tbody {
position: relative;
display: block;
width: 700px;
height: 239px;
overflow: scroll;
}
tbody td {
min-width: 120px;
border: 1px solid #222;
height: 200px;
vertical-align: top;
background-color: white;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
vertical-align: top;
}
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
});
$('.sortable').sortable({
connectWith: '.sortable',
scroll: false,
helper: 'clone',
appendTo: 'body',
});
});
(注意:您可能需要展开视图才能使 table 正确滚动)
- 我可以从 "Fixed Menu" 拖动到 "Sortable 1"
- 我可以从 "Sortable 1" 拖动到 "Fixed Menu"
- 当我滚动到 "Sortable 6" 并尝试将 "Item 31" 拖到 "Fixed Menu" 时,它会掉到它后面的其他 sortable 项目之一。
我也试过将其移植到固定的 div,但没有成功。有什么想法吗?
这似乎是可排序界面选择后排列表而不是前排列表的问题。
这是一个应该有效的解决方案。每当滚动时,等着看这个人是否已经停止滚动。然后计算某列是否被固定列覆盖,如果是则将其更改为不可排序,否则将其设置为可排序。
这是 fiddle: https://jsfiddle.net/kd8zpo96/1/
我在前面fiddle中添加的主要功能是这样的:
var isColliding = function( $element1, $element2 ) {
var allowableOverlap = 5;
var element1RightDistance = $element1.offset().left
+ $element1.outerWidth( true );
//Only care if the Right border of the fixed column is overtop the scrollable column
return (element1RightDistance > $element2.offset().left + allowableOverlap );
};
$('tbody').scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
//Don't call the function unless stopped for a little bit.
$.data(this, 'scrollTimer', setTimeout(function() {
$('.scrollableColumn').each(function(index, element){
var $element = $(element);
var colliding = isColliding($('.fixedColumn'), $element);
$element.find('.sortable').sortable( "option", "disabled", colliding );
})
}, 250));
});