modules/interface_sortable/interface_sortable_demos.module

<?php
// $Id: interface_sortable_demos.module,v 1.2 2007/05/15 00:32:45 marcp Exp $

/**
 * Implementation of hook_menu().
 */
function interface_sortable_demos_menu() {
  $items = array();

  $items['demos/interface/sortables'] = array(
    'title' => 'Interface Sortable Demo',
    'description' => 'Demonstrates ordering things with drag and drop using jQuery Interface.',
    'page callback' => 'interface_sortable_demos_sortables',
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM
  );
  $items['demos/interface/sortable_form_element'] = array(
    'title' => 'Interface Sortable Form Element Demo',
    'description' => 'Demonstrates a sortable form element.',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('interface_sortable_demos_sortable_form_element'),
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM
  );
  $items['demos/interface/sortable_form_element_with_options'] = array(
    'title' => 'Interface Sortable Form Element Demo With Options',
    'description' => 'Demonstrates a sortable form element with options.',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('interface_sortable_demos_sortable_form_element_with_options'),
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM
  );
  
  return $items;
}

function interface_sortable_demos_sortables() {
  _interface_sortable_demos_css();
  _interface_sortable_demos_sortables_js();
 
  $output = <<<EOT
<ul id="sort1">
	<li id="item1" class="sortable-item">Item 1</li>
	<li id="item2" class="sortable-item">Item 2</li>
	<li id="item3" class="sortable-item">Item 3</li>
	<li id="item4" class="sortable-item">Item 4</li>
	<li id="item5" class="sortable-item">Item 5</li>
	<li id="item6" class="sortable-item">Item 6</li>
	<li id="item7" class="sortable-item">Item 7</li>
</ul>
<div><a href="#" onClick="serialize('sort1'); return false;" >serialize the list</a></div>
EOT;
  
  return $output;
}

function interface_sortable_demos_sortable_form_element() {
  _interface_sortable_demos_css();
  
  $items = array(
    18 => 'eighteen',
    17 => 'seventeen',
    16 => 'sixteen',
    'cat' => 'meow',
    15 => 'fifteen',
    14 => 'fourteen',
    13 => 'thirteen',
    12 => 'twelve'
  );
  
  $options = array();
  $options['accept'] = 'sortable-item';
  $options['helperclass'] = 'sortable-helper';
  $options['activeclass'] = 'sortable-active';
  $options['hoverclass'] = 'sortable-hover';
  $options['fx'] = 300;
  $options['axis'] = 'vertically';
  $options['opacity'] = 0.6;
  
  $form['sortee'] = array(
    '#type' => 'sortable',
    '#items' => $items,
    '#options' => $options,
    '#description' => t('Drag and drop the elements to set their order'),
    '#title' => t('Sortable Form Element')
  );
  
  $form['submit'] = array('#type' => 'submit', '#value' => t('Submit'));
  
  return $form;
}

function interface_sortable_demos_sortable_form_element_submit($form_values, $form, $form_state) {
  $sorted = interface_get_sort($form_values['sortee']);
  drupal_set_message('submitted:  ['. implode(',', $sorted) .']');
}

function interface_sortable_demos_sortable_form_element_with_options() {
  _interface_sortable_demos_css();

  $items = array(
    'cat' => 'meow',
    'dog' => 'woof',
    'cow' => 'moo',
    'pig' => 'oink',
    'bird' => 'cheep'
  );
  
  $options = array(
      'fx' => 1100,
      'opacity' => 0.2,
      '#onchange' => <<<EOT
        function (obj) {
          serial = $.SortSerialize(obj[0].id);
          document.getElementById('edit-order').value = serial.hash;
          document.getElementById('edit-sorto').value = serial.hash;
          
        }
EOT
  );
    
  $form['order'] = array(
    '#type' => 'textarea',
    '#rows' => 3,
    '#cols' => 80,
    '#default_value' => t('the order will display here when changed')
  );
  
  $form['sorto'] = array(
    '#type' => 'sortable',
    '#outer_tag' => 'ul',
    '#inner_tag' => 'li',
    '#options' => $options,
    '#items' => $items,
    '#description' => t('Drag and drop the elements to set their order, if you please...'),
    '#title' => t('Sortable Form Element With Options'),
    '#default_value' => 'sorto[]=bird&sorto[]=cat&sorto[]=cow&sorto[]=dog&sorto[]=pig'
  );

  $form['submit'] = array('#type' => 'submit', '#value' => t('Submit'));
  
  return $form;
}

function interface_sortable_demos_sortable_form_element_with_options_submit($form_values, $form, $form_state) {
  $sorted = interface_get_sort($form_values['sorto']);
  drupal_set_message('submitted order:  ['. implode(',', $sorted) .']');
}

function _interface_sortable_demos_sortables_js() {  
  jquery_interface_add();
  drupal_add_js( <<<EOT
$(document).ready(
  function () {
    $('ul').Sortable(
      {
        accept : 'sortable-item',
        onchange : function (obj) {
                     serial = $.SortSerialize(obj[0].id);
                     alert(serial.hash);
                   },
        fx:				200,
        axis:			'vertically',
        opacity:		0.8
      }
    )
  }
);  
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
}
EOT
, 'inline');
}

function _interface_sortable_demos_css() {
  $css_file = drupal_get_path('module', 'interface_sortable_demos') .'/interface_sortable_demos.css';
  drupal_add_css($css_file); 
}
1	<?php
2	// $Id: interface_sortable_demos.module,v 1.2 2007/05/15 00:32:45 marcp Exp $
3
4	/**
5	* Implementation of hook_menu().
6	*/
7	function interface_sortable_demos_menu() {
8	$items = array();
9
10	$items['demos/interface/sortables'] = array(
11	'title' => 'Interface Sortable Demo',
12	'description' => 'Demonstrates ordering things with drag and drop using jQuery Interface.',
13	'page callback' => 'interface_sortable_demos_sortables',
14	'access arguments' => array('access content'),
15	'type' => MENU_NORMAL_ITEM
16	);
17	$items['demos/interface/sortable_form_element'] = array(
18	'title' => 'Interface Sortable Form Element Demo',
19	'description' => 'Demonstrates a sortable form element.',
20	'page callback' => 'drupal_get_form',
21	'page arguments' => array('interface_sortable_demos_sortable_form_element'),
22	'access arguments' => array('access content'),
23	'type' => MENU_NORMAL_ITEM
24	);
25	$items['demos/interface/sortable_form_element_with_options'] = array(
26	'title' => 'Interface Sortable Form Element Demo With Options',
27	'description' => 'Demonstrates a sortable form element with options.',
28	'page callback' => 'drupal_get_form',
29	'page arguments' => array('interface_sortable_demos_sortable_form_element_with_options'),
30	'access arguments' => array('access content'),
31	'type' => MENU_NORMAL_ITEM
32	);
33
34	return $items;
35	}
36
37	function interface_sortable_demos_sortables() {
38	_interface_sortable_demos_css();
39	_interface_sortable_demos_sortables_js();
40
41	$output = <<<EOT
42	<ul id="sort1">
43	<li id="item1" class="sortable-item">Item 1</li>
44	<li id="item2" class="sortable-item">Item 2</li>
45	<li id="item3" class="sortable-item">Item 3</li>
46	<li id="item4" class="sortable-item">Item 4</li>
47	<li id="item5" class="sortable-item">Item 5</li>
48	<li id="item6" class="sortable-item">Item 6</li>
49	<li id="item7" class="sortable-item">Item 7</li>
50	</ul>
51	<div><a href="#" onClick="serialize('sort1'); return false;" >serialize the list</a></div>
52	EOT;
53
54	return $output;
55	}
56
57	function interface_sortable_demos_sortable_form_element() {
58	_interface_sortable_demos_css();
59
60	$items = array(
61	18 => 'eighteen',
62	17 => 'seventeen',
63	16 => 'sixteen',
64	'cat' => 'meow',
65	15 => 'fifteen',
66	14 => 'fourteen',
67	13 => 'thirteen',
68	12 => 'twelve'
69	);
70
71	$options = array();
72	$options['accept'] = 'sortable-item';
73	$options['helperclass'] = 'sortable-helper';
74	$options['activeclass'] = 'sortable-active';
75	$options['hoverclass'] = 'sortable-hover';
76	$options['fx'] = 300;
77	$options['axis'] = 'vertically';
78	$options['opacity'] = 0.6;
79
80	$form['sortee'] = array(
81	'#type' => 'sortable',
82	'#items' => $items,
83	'#options' => $options,
84	'#description' => t('Drag and drop the elements to set their order'),
85	'#title' => t('Sortable Form Element')
86	);
87
88	$form['submit'] = array('#type' => 'submit', '#value' => t('Submit'));
89
90	return $form;
91	}
92
93	function interface_sortable_demos_sortable_form_element_submit($form_values, $form, $form_state) {
94	$sorted = interface_get_sort($form_values['sortee']);
95	drupal_set_message('submitted: ['. implode(',', $sorted) .']');
96	}
97
98	function interface_sortable_demos_sortable_form_element_with_options() {
99	_interface_sortable_demos_css();
100
101	$items = array(
102	'cat' => 'meow',
103	'dog' => 'woof',
104	'cow' => 'moo',
105	'pig' => 'oink',
106	'bird' => 'cheep'
107	);
108
109	$options = array(
110	'fx' => 1100,
111	'opacity' => 0.2,
112	'#onchange' => <<<EOT
113	function (obj) {
114	serial = $.SortSerialize(obj[0].id);
115	document.getElementById('edit-order').value = serial.hash;
116	document.getElementById('edit-sorto').value = serial.hash;
117
118	}
119	EOT
120	);
121
122	$form['order'] = array(
123	'#type' => 'textarea',
124	'#rows' => 3,
125	'#cols' => 80,
126	'#default_value' => t('the order will display here when changed')
127	);
128
129	$form['sorto'] = array(
130	'#type' => 'sortable',
131	'#outer_tag' => 'ul',
132	'#inner_tag' => 'li',
133	'#options' => $options,
134	'#items' => $items,
135	'#description' => t('Drag and drop the elements to set their order, if you please...'),
136	'#title' => t('Sortable Form Element With Options'),
137	'#default_value' => 'sorto[]=bird&sorto[]=cat&sorto[]=cow&sorto[]=dog&sorto[]=pig'
138	);
139
140	$form['submit'] = array('#type' => 'submit', '#value' => t('Submit'));
141
142	return $form;
143	}
144
145	function interface_sortable_demos_sortable_form_element_with_options_submit($form_values, $form, $form_state) {
146	$sorted = interface_get_sort($form_values['sorto']);
147	drupal_set_message('submitted order: ['. implode(',', $sorted) .']');
148	}
149
150	function _interface_sortable_demos_sortables_js() {
151	jquery_interface_add();
152	drupal_add_js( <<<EOT
153	$(document).ready(
154	function () {
155	$('ul').Sortable(
156	{
157	accept : 'sortable-item',
158	onchange : function (obj) {
159	serial = $.SortSerialize(obj[0].id);
160	alert(serial.hash);
161	},
162	fx: 200,
163	axis: 'vertically',
164	opacity: 0.8
165	}
166	)
167	}
168	);
169	function serialize(s)
170	{
171	serial = $.SortSerialize(s);
172	alert(serial.hash);
173	}
174	EOT
175	, 'inline');
176	}
177
178	function _interface_sortable_demos_css() {
179	$css_file = drupal_get_path('module', 'interface_sortable_demos') .'/interface_sortable_demos.css';
180	drupal_add_css($css_file);
181	}