使用jQuery实现图片的拖动排序
js部分：
<?php
$this->registerJsFile('/js/jquery-ui.js',['depends' => [\yii\web\JqueryAsset::className()]]);
?>
<?php
$resortUrl = Url::to(['material-image/resort']);
$this->registerJs('
$(function() {
$( "#sortable" ).sortable({
stop:function(){
var imageIdArray = new Array();
$(".eachImage").find("img").each(function(){
var imageId = $(this).attr("id");
imageIdArray.push(imageId);
})
$.post("'.$resortUrl.'",{imageIdArray:imageIdArray},function(data){
var data = eval(data);
var numberLength = data.length;
var imageOrder = numberLength - 1;
for (imageOrder; imageOrder+1 > 0; imageOrder--) {
$("#sortable li").eq(imageOrder).find("img").attr("number",data[imageOrder]);
}
})
}
});
$( "#sortable" ).disableSelection();
});
');
?>php部分：
/**
*对图片重新排序
**/
public function actionResort(){
$imageIdArray = Yii::$app->request->post('imageIdArray');
$numberArray = null;
foreach ($imageIdArray as $key => $value) {
$image = MaterialImageFile::findOne(['assoc_id' => $imageIdArray[$key]]);
$image->order = $key+1;
$image->save();
$numberArray[] = $key+1;
}
return \yii\helpers\Json::encode($numberArray);
}