mootools_使用MooTools 1.2进行拖放，排序，保存

mootools

This post has been updated: Using jQuery or MooTools For Drag, Drop, Sort, Save. The code on this page is no longer best practice.

帖子已更新： 使用jQuery或MooTools进行拖放，排序，保存 。 此页面上的代码不再是最佳实践。

The following is a repost of an article that ran on Script & Style a few months ago....

以下是几个月前在Script＆Style上发表的文章的转贴。

My customers love being able to control their website's content so I build a lot of administrative control into their website. One administrative control I frequently build is a News control. I allow the customer to add, edit, delete, and sort news items. My customers especially love sorting their articles because of the fashion of which they can sort: drag and drop. Here's how I do it.

我的客户喜欢能够控制其网站的内容，因此我在其网站中建立了很多管理控制。 我经常构建的一个管理控件是新闻控件。 我允许客户添加，编辑，删除和排序新闻项。 我的客户特别喜欢对文章进行分类，因为他们可以进行分类：拖放。 这是我的方法。

View Demo 观看演示

MySQL表 (The MySQL Table)

id	title	sort_order
1	Article 1	1
2	Article 2	2
3	Article 3	3
4	Article 4	4
5	Article 5	5
6	Article 6	6

ID	标题	排序
1个	第1条	1个
2	第二条	2
3	第三条	3
4	第4条	4
5	第5条	5
6	第6条	6

My news table contains more fields but these are the important fields per this example.

我的新闻表包含更多字段，但是在此示例中，这些是重要字段。

PHP / XHTML (The PHP / XHTML)

<?php
<div id="message-box"><?php echo $message; ?> Waiting for sortation submission...</div>

<form id="dd-form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<p><input type="checkbox" value="1" name="auto_submit" id="auto_submit" <?php if($_POST['auto_submit']) { echo 'checked="checked"'; } ?> /> <label for="auto_submit">Automatically submit on drop event</label></p>

<ul id="sortable-list">
	<?php 
		$sort_order = array();
		while($item = mysql_fetch_assoc($result))
		{
			echo '<li class="sortme" alt="',$item['id'],'">',$item['title'],'</li>';
			$sort_order[] = $item['sort_order'];
		}
	?>
</ul>
<br />
<input type="hidden" name="sort_order" id="sort_order" value="<?php echo implode($sort_order,'|'); ?>" />
<input type="submit" name="do_submit" value="Submit Sortation" class="button" />
</form>
<?php } else { ?>
	
	<p>Sorry!  There are no items in the system.</p>
	
<?php } ?>

We query the database to get every news item. What's extremely important is that the query sorts the items by their original sort order. We set the "rel" attribute equal to the article's ID and the list item's text to the article title.

我们查询数据库以获取每个新闻项。 极其重要的是，查询按项目的原始排序顺序对其进行排序。 我们将“ rel”属性设置为等于文章的ID，并将列表项的文本设置为文章标题。

CSS (The CSS)

#sortable-list				{ padding:0; }
li.sortme 		 			{ padding:4px 8px; color:#000; cursor:move; list-style:none; width:500px; background:#ddd; margin:10px 0; border:1px solid #999; }
#message-box				{ background:#fffea1; border:2px solid #fc0; padding:4px 8px; margin:0 0 14px 0; width:500px; }

I use the above CSS to format the news items so that the customer knows each news item may be dragged. None of the CSS is essential to this system.

我使用上述CSS来格式化新闻项目，以便客户知道每个新闻项目都可能被拖动。 没有CSS对这个系统来说是必不可少的。

MooTools JavaScript (The MooTools JavaScript)

/* when the DOM is ready */
/* create sortables */
	var sb = new Sortables('sortable-list', {
		/* set options */
		clone:true,
		revert: true,
		/* initialization stuff here */
		initialize: function() { 
			
		},
		/* once an item is selected */
		onStart: function(el) { 
			el.setStyle('background','#add8e6');
		},
		/* when a drag is complete */
		onComplete: function(el) {
			el.setStyle('background','#ddd');
			//build a string of the order
			var sort_order = '';
			$$('#sortable-list li').each(function(li) { sort_order = sort_order +  li.get('alt')  + '|'; });
			$('sort_order').value = sort_order;
			
			//autosubmit if the checkbox says to
			if($('auto_submit').checked) {
				//do an ajax request
				var req = new Request({
					url:'
   
   ',
					method:'post',
					autoCancel:true,
					data:'sort_order=' + sort_order + '&ajax=' + $('auto_submit').checked + '&do_submit=1&byajax=1',
					onRequest: function() {
						$('message-box').set('text','Updating the sort order in the database.');
					},
					onSuccess: function() {
						$('message-box').set('text','Database has been updated.');
					}
				}).send();
			}
		}
	});
});

We use Moo 1.2's Sortables plugin class to select all element within the list and make them sortable (drag and drop). Every time the sort order is changed, the hidden sort_order element is built and reset using a "|" as a separator. If the checkbox is checked, an ajax call is made to update the sort order in the database. Otherwise, the regular form submission via submit button will also save the sortation.

我们使用Moo 1.2的Sortables插件类来选择列表中的所有元素，并使它们可排序(拖放)。 每次更改排序顺序时，都会构建隐藏的sort_order元素，并使用“ |”重置 作为分隔符。 如果选中此复选框，则会进行ajax调用以更新数据库中的排序顺序。 否则，通过“提交”按钮提交的常规表单也将保存排序。

“标题” PHP / MySQL (The "Header" PHP / MySQL)

/* on form submission */
if(isset($_POST['do_submit'])) 
{
	/* split the value of the sortation */
	$ids = explode('|',$_POST['sort_order']);
	
	/* run the update query for each id */
	foreach($ids as $index=>$id)
	{
		if($id != '')
		{
			$query = 'UPDATE test_table SET sort_order = '.$index.' WHERE id = '.$id;
			$result = mysql_query($query,$connection) or die(mysql_error().': '.$query);
		}
	}
	
	/* now what? */
	if($_POST['byajax']) { die(); } else { $message = 'Sortation has been saved.'; }
}

View Demo 观看演示

The header is where the new sort order is committed. We split the sort_order form value by the "|" and perform a query for each item to update its order. Lastly, if the byajax flag is sent, we just die out the PHP script -- if not, we continue to load the page.

标头是提交新排序顺序的位置。 我们将sort_order表单值除以“ |” 并对每个商品执行查询以更新其订单。 最后，如果发送了byajax标志，我们将终止PHP脚本，如果没有，我们将继续加载页面。

Hot system, right? Dragging and dropping is by far the fastest way to sort a list of items. What are your thoughts? Have any ideas for improvements?

热系统吧？ 到目前为止，拖放是对项目列表进行排序的最快方法。 你觉得呢？你有没有什么想法？ 有任何改进的想法吗？

翻译自: https://davidwalsh.name/mootools-drag-drop

mootools