jQuery-ui可以在iframe中进行排序 [英] jQuery-ui droppable to sortable inside iframe
问题描述
主框架中有 droppable
元素,iframe应用程序中有 sortable
。我需要的是连接它们 - 能够将项目拖动到iframe的可排序
I have droppable
elements in main frame, and sortable
inside iframe app. What I need is to connect them - to be able to drag items to iframe's sortable
我有什么已完成:
http://jsfiddle.net/w9L3eorx/1/
内部 iframe
我有
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
<script>
$('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
});
</script>
主框架
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<iframe src="frame.html" id="frame" width="800" height="800"></iframe>
<script>
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable: $('.content', $("#frame")[0].contentDocument)
});
</script>
我看到工作示例 http://ma.rkusa.st/zepto-dnd/example.html 。但它是在没有jquery的情况下构建的,并且不能在IE9上工作
I see working example http://ma.rkusa.st/zepto-dnd/example.html. But it is built without jquery and is not working on IE9
推荐答案
我已经改变了boszlo示例以满足我的需求:
I have changed boszlo example to fit my needs:
- 我需要首先在iframe中进行初始排序(我的可放置侧边栏会在稍后点击后显示)
- 我需要在父(主)框架中重新初始可排序,连接可连接,但完全相同的选项。
- I need first init sortable in iframe (my dropable sidebar will appear later after some clicks)
- I need re-init sortable in parent (main) frame with connected dropable but with exact the same options.
http://jsfiddle.net/w9L3eorx/8/
所以在 iframe 我添加了功能
window.destroySortableAndGetOptions = function (selector) {
var opts = $(selector).sortable('option');
$(selector).sortable('destroy');
return opts;
}
这将破坏可排序和退货选项。
Which will destroy sortable and returns options.
在我的主框架之前 droppable
init,我销毁 sortable
并选择选项
And in my main frame before droppable
init, I destroy sortable
and take options
var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content');
并重新初始化 sortable
同样选项
...
connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions)
...
这篇关于jQuery-ui可以在iframe中进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!