拖動的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可拖動

回答

相關問題