个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当 jQueryUI 可排序列表正在进行拖动操作时，是否有办法强制 jQuery 更新占位符的位置，即使用户只是水平移动鼠标？ (jQuery 对垂直排序的 HitTest 似乎只在鼠标垂直移动时才起作用。)
如果没有记录的解决方案可用，则涉及对可排序、可拖动等的内部进行胡闹的未记录或黑客解决方案可以作为最后的手段。
这里有更多信息:
如果将项目拖到垂直 jQueryUI 可排序列表的右侧，除非上下移动鼠标，否则列表不会排序。一旦您向上或向下移动鼠标(即使只是 1 像素!)，列表就会突然排序。示例位于 http://jsfiddle.net/f3Lhg/并摘录如下。
这似乎是一种特殊情况，但当连接的列表从一个列表横向拖动到另一个列表时，这种情况实际上很常见。即使整个拖动不是完全水平的，前 30px-100px 也可能是水平的，从而导致不可预测的拖动行为和糟糕的用户体验。尽管问题更多地发生在连接的列表中，但您可以通过从列表中拖出并从侧面返回到列表中来轻松地重现单个列表。
问题并非特定于浏览器。我测试的所有浏览器上的行为都是相同的。此外，添加 tolerance 选项并不能解决问题。
这是 jQueryUI 错误还是预期行为？是否有已知的解决方法？
顺便说一句，在我的应用程序中，我已将列表连接到右侧，因此我无法使用 {axis:'y'} 选项，因为这会阻止拖动到连接的列表。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<style type="text/css">
.sortable { list-style-type: none; width: 400px; }
.sortable li { margin: 5px 0; padding: 30px; border: 1px solid #999; }
.sortable li.placeholder { margin: 0; height: 4px; border: 0; padding: 0; background-color: #800; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.sortable').sortable({
placeholder: 'placeholder'
}).disableSelection();
});
</script>
</head>
<body>
<ul class="sortable">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
</body>
</html>
最佳答案
查看 jQuery UI source code这似乎是预期的行为。
根据 axis 属性值的设置(或不设置)，jQuery UI 将属性 floating 设置为 bool 标志，以跟踪容器是垂直容器还是垂直容器。水平列表(第 46 行):
//Let's determine if the items are being displayed horizontally
this.floating = this.items.length ? o.axis === 'x' || (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false;
此值用于确定用户拖动元素时 jQuery UI 如何处理碰撞检测。
具体:
方法_intersectsWithSides(第492行)使用属性floating来确定您没有在水平列表中拖动，因此返回垂直碰撞结果。仅当同时存在垂直拖动方向和元素相交时，垂直碰撞检查才会返回 true:
if (this.floating && horizontalDirection) {
return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
} else {
return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
}
可以通过从 _intersectsWithSides 中的返回条件中删除 verticalDirection 要求来解决您的问题(这也可能会导致意外的错误行为)。
或者:
您可以尝试编辑插件的 _intersectsWithSides 方法，以在存在垂直或水平拖动时返回 true:
return (verticalDirection || horizontalDirection) && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)) || ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
关于jqueryUI 可排序 : how to force update of placeholder position while dragging，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12561671/
25
4
0
我已经开始学习 tensorflow，但很难理解占位符/变量问题。 我正在尝试编写一个矩阵乘法函数。它在使用 tf.constant 时有效，但我很难理解如何使用变量 这是我的代码 import te
我正在尝试匹配两个 URL，一个带有占位符，一个带有 Angular 中的填充占位符和 TypeScript。 例如 URL 在占位符被填充之前: http://this/is/{placeholde
我正在尝试理解 std::bind。我编写了以下程序。 #include
结果:两个属性文件均已加载 其中properties_location是“a.properties,b.properties” result: Exception in thread "main"
根据this推荐的解决方案是让 Placeholder 实现 Parcelable 接口(interface)。但在我的例子中，Placeholder 已经是一个接口(interface)，因此无法实
当我尝试更改 input 元素的 placeholder 属性时，它已成功完成。如果我将其更改为 MVC 中的 textboxfor 或 textareafor 元素，即使我使用 @placehold
我在我的 Pycharm 中编写了以下代码，它在 Tensorflow 中执行完全连接层 (FCL)。占位符发生无效参数错误。所以我在占位符中输入了所有的dtype、shape和name，但我仍然得到
当我尝试使用 removeAttr('placeholder') 从输入元素中删除占位符属性时:placeholder-shown 伪类不会从元素中删除，而是会更改输入值的颜色。 $(document
这很可能是一个错误，但我在这里报告它以供引用，并希望有人能够提出解决方法。 IE 11 在 textarea 元素上原生支持 placeholder 属性。那太棒了。但是，向 DOM 添加一个带有占位
尝试运行此代码时出现上述意外错误: # -*- coding: utf-8 -*- """ Created on Fri Jun 24 10:38:04 2016 @author: andrea ""
MVC 5.2.2 Razor 3.2.2 剑道 MVC UI v2014.2.903 在 Javascript 中，当我想更改 ComboBoxFor 的占位符文本时，我想我可以这样做: @mode
我想像这样向占位符添加一个图标 $("#tag_list").select2({ allowClear: true, placeholder: " inout
我们可以在play2的anorm中编写如下的sqls: def findById(id: String): Option[Link] = DB.withConnection {implicit con
在我的 iOS 应用程序中，我有一个简单的 View ，我以编程方式向其中添加了 TabBar 和 Navigation Bar。我使用 Interface Builder 添加了几个 GUI 元素。
我有这个代码 var i = 1 println(i) //result is 1 println(%02i) //is wrong 我希望它输出 01 而不是 1 最佳答案 不幸的是，你不能像这
我有一个简单的 HTML 表单，其中包含输入: 我有一个 JS 函数来检查输入的值是否为空，如果是，则用占位符的值填充它(对于非 Webkit 浏览器)。现在我想阻止保存占位符的值，所以我编写了一个
我正在使用 mathiasbynens / jquery-placeholder在 IE9 中启用占位符。我遵循了自述文件中提到的简单步骤。 但我在 $('input, textarea').plac
由于并非所有用户都保证支持 HTML 5 占位符属性，因此我尝试在 JavaScript 中为其构建解决方法: $(document).ready(function() { var searc
下面的链接将在 http://placehold.it 提供的占位符图像上打印“hello world” http://placehold.it/200&text=hello+world 是否可以在上
有没有办法设置“占位符”并稍后在逐行创建文本文件时编辑此部分，或者我是否必须最后进行行搜索并编辑此部分？ 我想用常量对选定的行进行计数，如果到达文件末尾，我想将列表常量的总和写入文件头。 CONSTA
我是一名优秀的程序员,十分优秀！