将一个项目从父框架中拖放到子框架中的可拖放对象中

我试图从父框架中将项目拖动到可放置元素中，但是在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

将一个项目从父框架中拖放到子框架中的可拖放对象中

回答

相关问题