將一個項目從父框架中拖放到子框架中的可拖放對象中

我試圖從父框架中將項目拖動到可放置元素中，但是在iframe中。它在將項目放在同一個框架中的可放置元素上時工作，但在跨框架嘗試時，它什麼也不做。將一個項目從父框架中拖放到子框架中的可拖放對象中

我試着繞過這很多次，但沒有成功。

下面的代碼父框架：

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet"        href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 
<iframe src="P1.html" width = "500px" height = "500px"> 
</iframe> 

</body> 
</html>

而這裏的代碼的iframe：

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet"        href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div>  
</body> 
</html>

來源

2013-03-26 Malatawy15

不幸的是，框架是單獨的窗口對象，所以你將不能夠將一個對象從一個DOM樹拖到另一個窗口的DOM樹中。網頁根據窗口DOM的當前狀態呈現。當你拖動你的元素時，DOM會發出重新繪製的信號，並且網頁會根據元素的樣式重新渲染（在拖動的情況下，頂部和左側樣式屬性通常是罪魁禍首）。

當您在頁面上有兩個框架（或窗口對象）時（在這種情況下一個在另一個框架內），您也有兩個完全獨立的DOM對象實例，因此它是行爲。當一個人在另一個內部並且一起執行一個更大的DOM渲染時，DOM不會協作;他們是完全不同的範圍（包括JavaScript），它的設計是出於某種原因（主要是爲了安全，因爲您可以將外部網站加載到嵌入式窗口/ iFrame對象中）。

來源

2013-03-26 21:14:44

這實際上沒有提供答案（例如匹配其他iframe元素的位置），並且每個iframe的JS *將*能夠互相訪問，因爲它們是相同域。 – NoBugs 2016-03-10 07:15:12

將一個項目從父框架中拖放到子框架中的可拖放對象中

回答

相關問題