Skip to content

Instantly share code, notes, and snippets.

@Bingnan

Bingnan/gist:42fa9e601e36096bccd4

Last active August 29, 2015 14:01
Show Gist options
  • Save Bingnan/42fa9e601e36096bccd4 to your computer and use it in GitHub Desktop.
Save Bingnan/42fa9e601e36096bccd4 to your computer and use it in GitHub Desktop.
Download ZIP
visual phone menu config
Raw
gistfile1.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Shopping Cart Demo</title>
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
h1 { padding: .2em; margin: 0; }
#tiles { float:left; width: 500px; margin-right: 10em; }
#screen { width: 322px; float: left; margin-top: 0em; margin-right: 10em; }
#result { float:left; width: 500px; }
/* style the list to maximize the droppable hitarea */
.draggable { width: 100px; height: 100px; font-size: 1em; float: left; margin-right: 0.5em; margin-top: 0.5em; padding: 0;}
.ui-widget-target { background-color: CadetBlue; height: 700px; width: 322px; }
</style>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script>
$(function() {
$( "#catalog" ).accordion();
$( ".draggable" ).draggable({
revert: "invalid",
snap: ".ui-widget-target",
snapMode: "inner",
appendTo: "body",
helper: "clone",
stop: function( event, ui ) {
$( this ).addClass( "dropped" );
$( this ).css({
"width":"100px",
"height":"100px",
"font-size": "1em",
"float": "left",
"margin-right": "0.5em",
"margin-top": "0.5em",
"padding":"0",
})
}
});
$( ".ui-widget-target" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".draggable",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
//$( this ).addClass( "dropped" );
//$( "<div></div>" ).text( ui.draggable.text() ).appendTo( this );
$( this ).append($(ui.draggable).clone());
$("#snaptarget .draggable").addClass("item");
$(".item").removeClass("ui-draggable draggable");
$(".item").draggable({
containment: 'parent',
grid: [100,100]
}).resizable({
//grid: [100,100],
//containment: "parent",
//aspectRatio: true,
});
}
});
$( ".dropped" ).resizable({
grid: [100,100],
containment: "parent",
aspectRatio: true,
});
});
</script>
</head>
<body>
<div id="tiles">
<h1 class="ui-widget-header">Tiles Collection</h1>
<div id="catalog">
<h2><a href="#">NOKIA APP</a></h2>
<div>
<div id="Phone" class="draggable ui-widget-content">
<p>Phone</p>
</div>
<div id="People" class="draggable ui-widget-content">
<p>People</p>
</div>
<div id="Messaging" class="draggable ui-widget-content">
<p>Messaging</p>
</div>
<div id="Email" class="draggable ui-widget-content">
<p>Email</p>
</div>
<div id="Setting" class="draggable ui-widget-content">
<p>Setting</p>
</div>
</div>
<h2><a href="#">3rd-Party APP</a></h2>
<div>
<div id="Calendar" class="draggable ui-widget-content">
<p>Calendar</p>
</div>
<div id="Camera" class="draggable ui-widget-content">
<p>Camera</p>
</div>
<div id="Gallery" class="draggable ui-widget-content">
<p>Gallery</p>
</div>
<div id="MixRadio" class="draggable ui-widget-content">
<p>MixRadio</p>
</div>
<div id="HERE" class="draggable ui-widget-content">
<p>HERE</p>
</div>
</div>
<h2><a href="#">TEST APP</a></h2>
<div>
<ul>
<li id="Phone" class="draggable ui-widget-content">Phone</li>
<li id="People" class="draggable ui-widget-content">People</li>
<li id="Messaging" class="draggable ui-widget-content">Messaging</li>
</ul>
</div>
</div>
</div>
<div id="screen">
<h1 class="ui-widget-header">Phone Screen</h1>
<div id="snaptarget" class="ui-widget-target">
<div class="placeholder">Drag Tiles Here</div>
</div>
</div>
<div id="result">
<h1 class="ui-widget-header">Save Result</h1>
<p>
<button type="button" onclick="SaveLayout()">SaveLayout</button>
</p>
<p id="result-sub">Config result here:</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment