README

包装 "HTML5 Sortable"，一个 jQuery 插件，用于使用原生的 HTML5 拖放 API 创建可排序的列表和网格。

查看 HTML5 Sortable 的插件演示。

请注意，此扩展没有提供比包装插件中可用的更多功能。它除了 Yii2 框架 之外没有其他依赖。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

php composer.phar require --prefer-dist raoul2000/yii2-html5sortable-widget "*"

或者将以下内容添加到您的 composer.json 文件的 require 部分：

"raoul2000/yii2-html5sortable-widget": "*"

用法

以下是一个安装此扩展后如何使用的示例。首先，创建一个 HTML bootstrap 列表组

		<ul class="list-group sortable" style="min-height: 42px;">
		  <li class="list-group-item"><span class="glyphicon glyphicon-align-justify"></span> Cras justo odio</li>
		  <li class="list-group-item disabled "><span class="glyphicon glyphicon-align-justify"></span> can't be dragged because of disabled class</li>
		  <li class="list-group-item"><span class="glyphicon glyphicon-align-justify"></span> Morbi leo risus</li>
		  <li class="list-group-item"><span class="glyphicon"></span>can't be dragged because the handle is missing !</li>
		  <li class="list-group-item"><span class="glyphicon glyphicon-align-justify"></span> Vestibulum at eros</li>
		</ul>

然后让我们添加一些样式，以便在拖放时我们的列表项渲染得更好

	li.list-group-item {
		height:42px;
	}
	li.sortable-placeholder {
		border: 1px dashed #CCC;
		background: #eeeeee;
		height:42px;
		list-style: none;
	}

最后，通过插入以下代码将其变为 HTML 5 Sortable

<?php 
	 		
	echo raoul2000\widget\html5sortable\Html5Sortable::widget([
		'selector' => '.sortable',
		'sortupdate' => new yii\web\JsExpression('function(){console.log("update");}'),
		'pluginOptions' => [
			'handle' => '.glyphicon-align-justify',
			'items' => ':not(.disabled)'
		]
	]);
?>

有关插件选项和使用的更多信息，请参阅 html5sortable@github。

许可

yii2-html5sortable-widget 根据 BSD 3-Clause 许可发布。有关详细信息，请参阅捆绑的 LICENSE.md 文件。