我在主框架中有droppable
元素,在iframe应用程序中有sortable
元素。我需要的是连接它们 - 以便能够将项目拖动到 iframe 的 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
最佳答案
给你:
$('.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/
请注意,您的 iframe 应该只是纯 HTML(不要在那里初始化可排序,否则会出现错误)
关于javascript - jQuery-ui droppable 到 iframe 内可排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32048829/