gpt4 book ai didi

IE8 中的 Jquery UI : suspending sort behavior while resizing an element that is sortable and resizable

转载 作者:行者123 更新时间:2023-12-01 01:30:26 24 4
gpt4 key购买 nike

我有一个元素列表,我想使用 Jquery UI 对其进行排序和调整大小。将它们组合起来在 Chrome 和 Firefox 中效果很好。但在 IE8 中(无论是在正常 View 还是兼容性 View 中),单独使用时任何一种行为都效果很好,但组合使用时,所产生的混合行为是不可取的。

我的期望是,通过拖动可调整大小的 handle 来调整元素大小不会也会激活可排序行为并移动该元素。不幸的是,当我拖动元素的调整大小区域时,它也会拖动元素,就像我移动它的排序位置一样。我希望这两种行为是排他的。以下是复制该行为的代码:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>

<style type="text/css">
.item { width: 200px; height: 20px; border: 1px solid gray; float: left; }
</style>
<script type="text/javascript">
$(document).ready(function(){

$(".item").resizable({
start:function() {
$("#wrapper").sortable("disable");
},
stop:function() {
$("#wrapper").sortable("enable");
}
});
$("#wrapper").sortable({
items:".item"
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="item">a</div><div class="item">b</div><div class="item">c</div><div class="item">d</div>
</div>
</body>
</html>

我尝试了几种策略来解决这个问题,包括:

  1. 上面的方法尝试在调整大小开始时禁用可排序。不幸的是,这根本没有效果。
  2. 让可调整大小的启动函数向项目添加一个类,然后按该类进行可排序过滤器(例如 $("#wrapper").sortable({items:".item:not(.resizing)"}) ; 和 $("#wrapper").sortable({items:".item", cancel:".resizing"}); )
  3. 用于排序和调整大小的选择器的几种变体
  4. 大量谷歌搜索,用头敲 table ,嘀咕着 Microsoft 的总体方向。

非常感谢任何帮助。

最佳答案

我通过指定可排序的句柄并在 div 中包含一个跨度来解决这个问题。

演示 here

不幸的是,这意味着整个元素无法进行排序,但您可以调整 handle 的尺寸并做出妥协!

关于IE8 中的 Jquery UI : suspending sort behavior while resizing an element that is sortable and resizable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1105514/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com