r2171 - branches/labs/demos/selectable
Author: cloudream@gmail.com
Date: Mon Mar 2 09:33:44 2009
New Revision: 2171
Added:
branches/labs/demos/selectable/droppable.html
Log:
labs: add new selectable+droppable demo (issus: doesn't work when selected
items > 6)
Added: branches/labs/demos/selectable/droppable.html
==============================================================================
--- (empty file)
+++ branches/labs/demos/selectable/droppable.html Mon Mar 2 09:33:44 2009
@@ -0,0 +1,135 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Selectable - Default functionality</title>
+ <link rel="stylesheet" href="../../../../trunk/themes/base/ui.all.css"
type="text/css" media="screen">
+ <script type="text/javascript"
src="../../../../trunk/jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../../../trunk/ui/ui.core.js"></script>
+ <script src="../../../../trunk/ui/ui.draggable.js" type="text/javascript"
charset="utf-8"></script>
+ <script src="../../../../trunk/ui/ui.droppable.js" type="text/javascript"
charset="utf-8"></script>
+ <script type="text/javascript"
src="../../source/ui.selectable.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+
+ #selectable {
+ list-style: none;
+ margin: 0; padding: 10px;
+ height: 300px;
+ width: 300px;
+ float: left;
+ }
+
+ #selectable li {
+ margin: 2px;
+ width: 200px;
+ padding: 3px;
+ }
+
+ #droppable { width: 120px; height: 120px; padding: 0.5em; float: left;
margin: 10px; }
+
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+
+
+ $('#selectable li').draggable({
+ distance: 1,
+ helper: function(event) {
+
+ var set = $('<div></div>'),
+ selected = $("#selectable li.ui-state-active"),
+ offset = $(this).offset(),
+ click = {
+ left: event.pageX - offset.left,
+ top: event.pageY - offset.top },
+ center = {
+ left: (selected.length < 5 ? selected.length / 2 : 2.5) * 20,
+ top: ((parseInt((selected.length-1) / 5) + 1) * 20) / 2
+ };
+
+ selected.each(function(i) {
+
+ var row = parseInt(i / 5);
+ var j = i - (row * 5);
+
+ var copy = $('<div></div>')
+ .addClass('ui-state-active')
+ .html(this.innerHTML.split(' ')[1])
+ .css({
+ width: $(this).width(), height: $(this).height(),
+ padding: 3, margin: 2, position: 'relative', overflow: 'hidden'
+ })
+ .appendTo(set)
+ .animate({
+ width: 10,
+ height: 10,
+ left: (20 * j) + click.left - center.left,
+ top: (-20 * i) + click.top - center.top + (row * 20)
+ }, 500);
+
+ });
+
+
+ return set;
+
+ }
+ });
+
+ $("#droppable").droppable({
+ hoverClass: 'ui-state-active',
+ drop: function(event,ui) {
+
+ $(this).addClass('ui-state-highlight');
+
+ var text = "Dropped: ";
+ ui.helper.find("div").each(function(){
+ text += $(this).text() + ", ";
+ });
+
+ $(this).find("p").html(text);
+
+ }
+ });
+
+ //YES! A STANDARD NON-OPTIONS SELECTABLE!
+ $("#selectable").selectable();
+
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+<ul id="selectable" tabindex='1'>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+ <li class="ui-state-default">Item 11</li>
+ <li class="ui-state-default">Item 12</li>
+</ul>
+
+<div id="droppable" class="ui-widget-header">
+ Drop here
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+ Takes a container element with a list of images in it and attaches a
magnifier behaviour to them, so when you come near
+ the elements with the mouse, the size gets bigger, like the Mac OS X Dock.
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>