我现在已经测试了很多事情,我知道这不是最佳的,但是我需要从主页到 iframe 。两者都在同一域中。
我已经用iFrameFix进行了测试,但是我的浏览器(Chrome)不支持它,或者我做错了什么。
http://api.jqueryui.com/draggable/#option-iframefix
<div id="mycontainer" class="mycontainer">
<iframe id="iframewindow" src="./child.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
在iframe中:
<div id="sortable">
<div class="portlet">
some content
</div>
</div>
(我在iframe内使用jQuery ui进行排序。)
主页内加载可拖动的脚本:
$(function() {
$( ".draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
iframeFix: true,
helper: function(event) {
return "<div class='custom-helper'>I move this</div>";
},
revert: "invalid",
});
$().disableSelection();
)};
我已经测试了制作覆盖物等,但是不知何故我没有工作。
是使从HTML页面到iframe工作的拖放方式的一种方式吗?(在所有浏览器中?)
如果其他解决方案效果很好,我不需要jQuery UI可拖动。
我找到了这个答案,并且能够应用它:jquery-ui可滴在iframe
中的可排序这是我的小提琴:https://jsfiddle.net/twisty/gkxe8vpy/4/
html
<div id="mycontainer" class="mycontainer">
<iframe id="iframewindow" src="" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="draggable" class="ui-state-highlight">Drag Me</div>
javascript
/**
* Code to populate iFrame, mimics actual SRC
*/
var frameHTML = "<div id='sortable'><div class='portlet'>some content</div></div>";
var $iframe = $("#iframewindow");
$iframe.ready(function() {
$iframe.contents().find("body").html(frameHTML);
});
/**
* End of iFrame code
*/
$(function() {
$("#draggable").draggable({
connectToSortable: $iframe.contents().find("#sortable").sortable({
items: "> div",
revert: true,
}),
helper: "clone",
iframeFix: true,
helper: function(event) {
return "<div class='custom-helper'>I move this</div>";
},
revert: "invalid"
});
$iframe.contents().find("#sortable").disableSelection();
});
这里的"技巧"是将可排序作为connectToSortable
选项的目标。这是根据需要返回selector
的,两个对象将相互意识。
请注意,您的iframe应该只是平原的HTML(不要在那里初始化可排序否则会不可行)