[英]jQuery-ui droppable to sortable inside iframe
I have droppable
elements in main frame, and sortable
inside iframe app. 我在主框架中有
droppable
放置元素,并且在iframe应用中sortable
。 What I need is to connect them - to be able to drag items to iframe's sortable
我需要的是连接它们-能够将项目拖动到iframe的
sortable
There is what I've done: http://jsfiddle.net/w9L3eorx/1/ 我已经完成了: http : //jsfiddle.net/w9L3eorx/1/
Inside iframe
I have 在
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>
The main frame 主框架
<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>
I see working example http://ma.rkusa.st/zepto-dnd/example.html . 我看到了工作示例http://ma.rkusa.st/zepto-dnd/example.html 。 But it is built without jquery and is not working on IE9
但是它是在没有jquery的情况下构建的,因此无法在IE9上运行
Here you go: 干得好:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable:$('#frame').contents().find('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
})
});
FIDDLE : http://jsfiddle.net/w9L3eorx/5/ 内容 : http : //jsfiddle.net/w9L3eorx/5/
Note that your iframe should be just plain HTML (do not initialize sortable there or it will misbehave) 请注意,您的iframe应该只是纯HTML(请勿在此处初始化可排序的类,否则将无法正常运行)
I have changed boszlo example to fit my needs: 我已经更改了boszlo示例以适合我的需求:
http://jsfiddle.net/w9L3eorx/8/ http://jsfiddle.net/w9L3eorx/8/
So in iframe I have added function
所以在iframe中,我添加了功能
window.destroySortableAndGetOptions = function (selector) {
var opts = $(selector).sortable('option');
$(selector).sortable('destroy');
return opts;
}
Which will destroy sortable and returns options. 这将破坏可排序并返回选项。
And in my main frame before
droppable
init, I destroy sortable
and take options 在
droppable
init之前的主框架中 ,我破坏了sortable
并接受了选项
var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content');
and re-init sortable
with the same options 并使用相同的选项重新初始化
sortable
...
connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions)
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.