我们目前正在尝试实现jQuery UI 提供的draggables 和sortables 之间的cross-frame dragging。现在可以正常工作了。然而,当从父框架拖动到子框架时,鼠标偏移似乎关闭了——请看这个 fiddle :http://jsfiddle.net/r5nfe/6/ .
父级代码:
$('#my-frame').load(function () {
$('.draggable').draggable({
appendTo: 'body',
helper: 'clone',
iframeFix: true,
revert: 'invalid',
connectToSortable: $('#my-frame').contents().find('.sortable'),
cursorAt: { top: 0, left: 0 }
});
$('#my-frame').contents().find('.sortable').sortable({
iframeFix: true,
cursorAt: { top: 0, left: 0 }
});
});
子框架中的代码:
var containers = $('.sortable');
containers.sortable({
connectWith: containers,
cursor: 'move',
revert: true,
cursorAt: { top: 0, left: 0 }
});
有人可以告诉我们如何修复鼠标偏移吗?
最佳答案
解决方案 2 更新
我添加这个js函数是因为当你在iframe中添加过多的可拖动元素时,如果向下滚动,拖动元素可能会被可排序元素覆盖
$('.draggable').on('dragstop',autoResize);
function autoResize(){
var newheight;
if(document.getElementById){
newheight=document.getElementById('my-frame').contentWindow.document .body.scrollHeight;
}
newheight=newheight+100;
$('#my-frame').css('height',newheight);
}
这里是new jsfiddle
结束解决方案 2 更新
这个问题似乎是一个错误,有人提出了他的解决方案(基本上是一种解决方法):trasparent div solution
1 我的第一个解决方案是在不更改代码的情况下将 iframe 放在可拖动内容之前,如图所示 here ,代码:
<iframe id="my-frame" src="/VqxGf/3/show"></iframe>
<ul>
<li class="draggable">Drag me</li>
<li class="draggable">Drag me 2</li>
<li class="draggable">Drag me 3</li>
</ul>
2 另一个似乎有效的解决方案是使用样式属性:包含可拖动
<ul style="position:absolute">
<li class="draggable">Drag me</li>
<li class="draggable">Drag me 2</li>
<li class="draggable">Drag me 3</li>
</ul>
<iframe frameborder="0" id="my-frame" src="/ATu6F/30/show"></iframe>
iframe 页面:
<ul id="sortable" style="margin-top:100px" class="sortable idle">
<li>Sortable</li>
<li>Sortable 2</li>
<li>Sortable 3</li>
</ul>
<ul id="sortable2" class="sortable idle">
<li>Sortable</li>
<li>Sortable 2</li>
<li>Sortable 3</li>
</ul>
希望这对您有所帮助。
请参阅本文开头的编辑
关于javascript - 跨框架可拖动 + 可排序的鼠标偏移量无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16731203/