Bom dia, o problema é o seguinte estou a desenvolver uma plataforma de drag n drop que ao fazer o drop no div quero que apareça o código HTML.
Na pesquisa que fiz não encontrei nada do género.
Alguém conhece algum exemplo do género?
O drag n drop já está feito
o que já fiz foi isto:
<style>
.myDraggable { width: 50px; height: 50px; background: red; border:1px solid; }
#draggableHelper { width: 50px; height: 50px; background: yellow; }
div{font-size:10px; font-family: Arial; padding: 5px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('.myDraggable').draggable( {
cursor: 'move',
containment: '#document',
snap: '#content',
helper: myHelper,
stop: handleDragStop
} );
}
function myHelper( event )
{
return '<div id="draggableHelper"></div>';
}
function handleDragStop( event, ui )
{
var draggable = ui.draggable;
var Myid = $(this).attr( 'id' );
alert( 'The square with ID "' + Myid + '" was dropped onto me!' );
}
</script>
</head>
<body>
<table>
<tr>
<td><div id="test1" class="myDraggable"></div></td>
<td><div id="test2" class="myDraggable"></div></td>
<td><div id="test3" class="myDraggable"></div></td>
<td><div id="test4" class="myDraggable"></div></td>
</tr>
</table>
<div id="content" style="height: 400px; width:400px; border: 1px solid black;">
</div>
</body>
Na pesquisa que fiz não encontrei nada do género.
Alguém conhece algum exemplo do género?
O drag n drop já está feito
o que já fiz foi isto:
<style>
.myDraggable { width: 50px; height: 50px; background: red; border:1px solid; }
#draggableHelper { width: 50px; height: 50px; background: yellow; }
div{font-size:10px; font-family: Arial; padding: 5px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('.myDraggable').draggable( {
cursor: 'move',
containment: '#document',
snap: '#content',
helper: myHelper,
stop: handleDragStop
} );
}
function myHelper( event )
{
return '<div id="draggableHelper"></div>';
}
function handleDragStop( event, ui )
{
var draggable = ui.draggable;
var Myid = $(this).attr( 'id' );
alert( 'The square with ID "' + Myid + '" was dropped onto me!' );
}
</script>
</head>
<body>
<table>
<tr>
<td><div id="test1" class="myDraggable"></div></td>
<td><div id="test2" class="myDraggable"></div></td>
<td><div id="test3" class="myDraggable"></div></td>
<td><div id="test4" class="myDraggable"></div></td>
</tr>
</table>
<div id="content" style="height: 400px; width:400px; border: 1px solid black;">
</div>
</body>