1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <!DOCTYPE html>
<html><head>
<title>jQuery UI Draggable</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<script type="text/javascript">
$(function ()
{
//Cursor : changer du curseur
//Revert : retour du drag à son origine
//iFrame : Permet de placer le drag au dessus des iFrames
$("#FirstDiv").draggable({ cursor: "crosshair", opacity: 0.75, revert: true, iframeFix: true });
$("#SecondDiv").draggable({ cursor: "crosshair", opacity: 0.75, revert: true, iframeFix: true });
$("#Frame_Drop").load(function ()
{
var $this = $(this);
var contents = $this.contents();
// here, catch the droppable div and create a droppable widget
contents.find('.DroppableDiv').droppable(
{
tolerance: "pointer",
iframeFix: true,
drop: function (event, ui)
{
var drag = $(ui.draggable[0]);
var drop = $(this);
$(drop).css({ opacity: 1.0 });
$(drop).css("background-color", $(drag).css("background-color"));
}
});
});
});
</script>
</head>
<body>
<div class="demo">
<div id="mainDiv" style="background-color: #40A497; height:220px">
<div id="FirstDiv" style=" background-color: #007667; border-style:solid; border-width:1px; font-size:medium; height:100px; width:100px"></div>
<div id="SecondDiv" style=" background-color: #00F4D4; border-style:solid; border-width:1px; font-size:medium; height:100px; width:100px"></div>
</div>
</div>
<iframe id="Frame_Drop" src="Frame_Drop.htm" style="width: 1400px; height: 800px"></iframe>
</body>
</html> |
Partager