拖动的iFrame使用jQuery UI可拖动

现在我已经测试了不少东西，我知道这是不是最佳的，但我需要将它从主页下降到IFRAME。两者都在同一个域中。拖动的iFrame使用jQuery UI可拖动

我已经使用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

：（我使用jQuery UI的iframe中的排序）

<div id="sortable"> 
    <div class="portlet"> 
    some content 
    </div> 
</div>

主网页内加载的可拖动该脚本：

$(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可拖动。

来源

2016-12-15 Preben

为了确认，你试图从页面拖动的元素，可排序，在iFrame中的页面上？ – Twisty

是的。我的可拖动项目（元素）列表位于主HTML内，我将它们拖放到iframe中可排序。 – Preben

不幸的是，我不能为这种情况做一个jsfiddle，否则我会这样做。 – Preben

我发现这个答案，并能运用它：jQuery-ui droppable to sortable inside 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，并且2对象将会知道对方。

请注意，您的iframe应该只是普通的HTML（不初始化排序存在，否则将出现异常）

来源

2016-12-16 00:52:10 Twisty

我其实还是没有得到它与“真正的”iframe的工作。这个例子运行良好，我玩过jsfiddle。但是，当我的本地计算机上使用真正的iframe进行尝试时，它不起作用。这个iframe问题在jQuery中可能过于敏感/易受攻击。可能只是测试这更多：http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface（该接缝岩石坚实比较jQuery） – Preben

@Preben有很多促成因素和jQuery可能是其中之一。大多数人都试图保护XSS，所以我会在所有常见浏览器中强烈测试以确保解决方案正常工作。 – Twisty

是的，我正在研究这个。我可以使用hack将draggable添加到iframe本身。这样我确信它会起作用。：-）谢谢！ – Preben

拖动的iFrame使用jQuery UI可拖动

回答

相关问题