提问人：Vijay Dhanvai 提问时间：10/4/2023 最后编辑：Vijay Dhanvai 更新时间：10/5/2023 访问量：71
jQuery UI可排序，身体缩放不起作用，无法正确计算拖放区域
jQuery UI sortable with body zoom not working, Not calculating drag and drop area correctly
问：
我正在尝试使用身体上的缩放CSS属性进行jQuery UI排序。但它不允许我正确地拖放到正确的位置。
拖动仅适用于半个区域，如果用户尝试从右侧的空白区域拖放（在我的情况下为黑色区域），则不起作用
https://codepen.io/VijayDhanvai/pen/poqxEzQ
掉落不起作用的红色区域
$(function () {
var zoomScale = $("body").css("zoom");
console.log(typeof zoomScale, zoomScale.toString());
var canvasHeight = $("#sortable").height();
var canvasWidth = $("#sortable").width();
$("#sortable").sortable({
sort: function (e, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var changeTop = ui.position.top - ui.originalPosition.top;
var sortIndex =
$("#sortable .ui-sortable-placeholder").index() + 30;
var newLeft =
ui.originalPosition.left +
changeLeft / zoomScale -
ui.item.parent().offset().left;
var newTop =
ui.originalPosition.top +
changeTop / zoomScale -
ui.item.parent().offset().top +
sortIndex;
ui.helper.css({
left: newLeft,
top: newTop,
});
},
});
});
$(function () {
var zoomScale = $("body").css("zoom");
console.log(typeof zoomScale, zoomScale.toString());
var canvasHeight = $("#sortable").height();
var canvasWidth = $("#sortable").width();
$("#sortable").sortable({
sort: function (e, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var changeTop = ui.position.top - ui.originalPosition.top;
var sortIndex =
$("#sortable .ui-sortable-placeholder").index() + 30;
var newLeft =
ui.originalPosition.left +
changeLeft / zoomScale -
ui.item.parent().offset().left;
var newTop =
ui.originalPosition.top +
changeTop / zoomScale -
ui.item.parent().offset().top +
sortIndex;
ui.helper.css({
left: newLeft,
top: newTop,
});
},
});
}); .ui-sortable-placeholder,
.ui-sortable-helper {
visibility: visible !important;
background-color: black !important;
}
.ui-sortable-placeholder td,
.ui-sortable-helper td {
background-color: aqua;
}
table {
/* width: 100%; */
border-spacing: collapse;
border-spacing: 0;
}
td {
padding: 0px;
min-width: 100%;
border: solid 1px #ddd;
}
body {
zoom: 1.3;
}<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.viewport/raw/master/jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody id="sortable">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$180</td>
</tr>
</tbody>
</table> 答：
1赞
Lyrene
10/4/2023
#1
可能原因
jQuery UI 的行为是将鼠标位置与元素偏移量进行比较。但是，子元素的偏移值似乎不会受到父元素上的 if 设置的影响。（Safari CSS Reference 略微提到了它。sortablezoomzoom
顺便说一句，根据Mozilla的zoom文档，CSS是非标准的。这意味着它在可变浏览器中可能有不同的行为。如果可能的话，尽量不要使用 CSS 缩放。zoom
解决方案：嵌套缩放
在您的情况下，如果设置为 ，则在缩放后获得宽度效果很好。所以我尝试设置嵌套来模拟设置的视图：zoom<td>zoomzoom<body>
tbody {
zoom: calc(1 / 1.3);
}
td {
zoom: 1.3;
padding: 0px;
min-width: 100%;
border: solid 1px #ddd;
}
body {
zoom: 1.3;
}
如果你这样做，你不必自己计算元素：helper
$("#sortable").sortable();
这是演示：https://codepen.io/LyreneLiu/pen/PoXyQYx
评论
0赞
Vijay Dhanvai
10/5/2023
你拯救了我的一天，感谢你的帮助。
0赞
Baris
10/4/2023
#2
而不是可排序，使用可拖动的 ui.https：//jqueryui.com/draggable/
$(document).ready(function(){
$('td').addClass('tddrag');
});
$(function () {
var zoomScale = $("body").css("zoom");
console.log(typeof zoomScale, zoomScale.toString());
var canvasHeight = $(".sort").height();
var canvasWidth = $(".sort").width();
$(".tddrag").draggable({
sort: function (e, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left;
var changeTop = ui.position.top - ui.originalPosition.top;
var sortIndex = $(".sort .ui-sortable-placeholder").index() + 30;
var newLeft = ui.originalPosition.left + ( changeLeft / zoomScale - ui.item.parent().offset().left);
var newTop = ui.originalPosition.top + (changeTop / zoomScale - ui.item.parent().offset().top) + sortIndex;
ui.helper.css({
left: newLeft,
top: newTop,
});
},
});
});
评论
.ui-sortable-helper { background-color: aqua !important; }