- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个可拖动列表,它通过 connectToSortable 连接到一个可排序列表,一切都按预期工作,但在 jQuery UI v1.11.2 更新后,出现以下 2 个问题:
1) 在进入可排序列表时,可拖动助手相对于光标位置稍微重新定位。
2) 在离开可排序列表时(显然没有放入助手),可拖动助手相对于光标显着重新定位。
我一直在做一些测试,并找到了问题的原因。可排序列表是相对定位的。
助手总是附加到主体,但在 1.11.2 更新中,它附加到主体,但当您输入可排序时,它附加到可排序列表。
这个项目需要相对定位的容器,所以移除相对定位不是一个选项。
HTML:
<div class="composer">
<ul>
<li id="draggable" class="ui-state-highlight">Drag me into sortable list and then back here </li>
</ul>
</div>
<div class="all-content-holder">
<div class="all-content-background">
<div class="all-content">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
</div>
JS
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("#sortable").sortable({
revert: true
});
$("ul, li").disableSelection();
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
}
.composer {
width:300px;
background-color:#ccc;
position: fixed;
top: 36px;
bottom: 0;
z-index: 9999999;
font-size:11px;
line-height: normal;
}
.all-content-holder {
height: 100%;
margin-left: 300px;
margin-top: 36px;
right: 0;
bottom: 0;
overflow: auto;
min-height: 100%;
}
.all-content-background {
margin: 0;
overflow-x: visible;
position: static;
width: 100%;
max-width: 100%;
}
.all-content {
position: relative;
width: 100%;
z-index: 1;
}
我创建了以下 JSFiddle 来重现该问题: http://jsfiddle.net/bennyticklez/oLowzou6/1/
我尝试了很多修复都无济于事!如果有人能提供帮助,那就太好了。
提前致谢
最佳答案
原来这是jQuery UI Draggable 1.11.2版本专门引入的bug,1.11.3也存在。
1.11.4 及更高版本可以正常工作,因此将 jQuery UI 升级到此版本将解决此问题。
我还发现在 1.11.2 版本的 jQuery UI 中使用 1.11.4 版本的 Draggable 解决了这个问题,并且没有导致我能找到的任何错误。因此,如果您无法使用 1.11.2/1.11.3 版本的 jQuery(在过时的 CMS 等上),只需将 1.11.4 版本的 Draggable 放入其中,一切都应该正常运行。
希望这对您有所帮助。
关于javascript - 拖入相对定位的可排序列表时,jQuery 可拖动助手位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29166562/
有时我需要(为了让我的开发更快)在我的代码中对一些东西进行硬编码。这可能是凭据,或者可能只是一个允许我测试某些功能的 hack。由于很多原因,我从来不想将这段代码推送到主代码库甚至开发分支。一段时间以
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
我经常发现自己从类中提取常见行为到只包含一组静态方法的帮助程序/实用程序类中。我经常想知道是否应该将这些类声明为抽象类,因为我真的想不出实例化这些类的正当理由? 将这样的类声明为抽象类的优点和缺点是什
如果我这样做: $obj = factory(Object::class)->make(); collect($obj); 我返回了一个类型的集合: Illuminate\Support\Collec
我有一个应用程序,我可以在其中列出 parent 和 child 。当我添加一个 child 时,我需要获得一个 parent 列表作为下拉列表显示。有没有类似 collection_select 的
我有渲染组件( source ),用于从 Controller 字段渲染组件/助手。它适用于 ember 1.9.1,但在更新到 ember 1.12.1 后,我发现 API 发生了变化。之后upda
我刚开始使用 Rails,还有很多东西需要学习,所以我可能会比平常更频繁地在 Stackoverflow 上询问初学者 Rails/Ruby 问题。 我只是想弄清楚 Helpers 在 Rails 中
我在 Web 上使用 VS Express 2012。我的项目是一个 MVC 4 项目。 我正在尝试创建一个助手来创建一个菜单项,该菜单项是带有标签的 png 图像。我几乎剪切并粘贴了这段代码: Ac
我正在尝试在我的 Vue 页面中映射我商店的状态变量: export default { data: () => ({ localData: []
我目前正在开发一个 Rails 插件,用于生成 iPhone 特定的 HTML 元标记。我尝试使用 ActionView::TestCase 进行单元测试,但不断收到相同的错误。请参阅下面的文件内容和
我正在努力解决一个与变量声明相关的非常基本的问题。我已经阅读了有关变量的所有内容,但我不知道我的问题是否与 1) 我如何声明变量或 2) 我如何设置变量的范围有关。 首先,我对 Meteor 中变量的
我想知道是否可以将参数传递给 Meteor Helper 并在 HTML 中插入返回对象的属性,而不仅仅是返回最终值。我有这样的东西: HTML: {{#each conversation}}
我正在尝试为我的 Ember 应用程序构建一个新的条件助手。值得一提的是,我正在使用使用 Handlebars 2.0 的 Ember 1.10.1,并且我无法升级它,如果能很好地解决这个版本的 Em
我最近从 Dreamweaver 迁移到 aptana,并尝试使 aptana 尽可能相似;) 已经做了很多更改,但我仍然找不到使代码字体变小的方法(在 Dreamweaver 中代码更清晰,因为字体
我有以下模板: {{#each helperOne "1" "2" }} Lorem upsom {{#each}} helper : template.tempName.h
我有这个简单的代码块,它位于我的一个模板上,但我想将其作为助手放置,以便我的所有 View 都可以访问它。 @hidden(field: Field) = { @defining(field)
使用正则表达式,我正在替换 **text in bold**至 text in bold在一个字符串中,然后显示 message使用 {{{message}}}在我的 EmberJS 模板上。问题是我
是否有任何非常有用和健壮的 C++ 网络库?和库来帮助他们更好地运行?诸如使用 << 时自动进行字节序转换之类的东西,阻止读取直到结构或 w/e 您的读取完全传输,有助于调试协议(protocol)的
模板 {{#each tags}} {{#isObject this}} Object {{else}}
我有返回 JSON 的函数: Template.mainmenu.menuitem = function() { var jsonObj = { items: [ { ur
我是一名优秀的程序员,十分优秀!