The example bellow shows the following tips:
- use minimal amount of dependencies
- display in the ui what is the purpose of this demo code
- display in the ui what is the behavior
- display in the ui previous and next code
- display in the ui explanations about the key points in the code ...
<html>
<head> <title>draggable-2 demo</title>
<link rel="stylesheet" type="text/css" href="../../lib/jQueryUI-1.11.4/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/jquery-layout/layout-default.css"/>
<link rel="stylesheet" type="text/css" href="../../css/screen/themes/default/site/site.css" />
<link rel="stylesheet" type="text/css" href="../../css/nice-table.css"/>
<link rel="stylesheet" type="text/css" href="../../css/screen/themes/default/tech_doc.css" />
<script type="text/javascript" src="../../lib/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../lib/jQueryUI-1.11.4/jquery-ui.min.js"></script>
<style>
#draggable-2 { 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-2" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var id = ui.draggable.attr("id");
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped the draggable elemement with following id: " + id );
}
});
});
</script>
</head>
<body>
<p></p>
<h3 style="margin-top: 20px"> draggable-2 demo </h3>
<div id="con_draggable" style="clear:both">
<ol>
<li>
This demo uses <a href="https://jqueryui.com/droppable"> the droppabl jquery ui page </a> as a source.
</li><li>
The purpose is to drag the draggable into a dropable element and trigger the drop event
</li><li>
Also the following <a href="http://stackoverflow.com/a/10665924/65706"> stackoverflow answer </a>
</li><li>
The next step will be to integrate a ajax calling function on the drop event doing post to the server
</li><li>
Go to the <a href="http://localhost:3000/protos/draggable/draggable-3.html"> next proto page </a>
</li>
<div id="draggable-2" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here the draggable </p>
</div>
</div><!-- eof con_draggable -->
</body>
</html>
Posts
No comments:
Post a Comment
- the first minus - Comments have to be moderated because of the spammers
- the second minus - I am very lazy at moderating comments ... hardly find time ...
- the third minus - Short links are no good for security ...
- The REAL PLUS : Any critic and positive feedback is better than none, so your comments will be published sooner or later !!!!