php drag drop mysql_jquery drag插件 php实现拖动排序 | 极安全-JiSec

本文介绍了如何使用HTML5和JavaScript实现在前端实现Banner的拖动排序功能,并通过PHP后端进行数据交互与更新。通过实例展示了如何利用Ajax将排序信息发送到服务器并处理,提升网站用户体验。
摘要由CSDN通过智能技术生成

665799ad17f836ee3cd630c50afe0b50.png

Html端代码

34fdd13803481c06e09784551999ee2e.jpg'path'%5D?>

链接地址:

删除

编辑

js端代码

this.evenDrag = function() {

// 重新排序

var sort = 0;

var menuSortArr = new Object();

var i = 0;

$(".bannerSort").each(function(){

var id = $(this).attr("id");

sort ++;

menuSortArr[i] = {id:id, sort:sort};

i ++ ;

var subSort = 0;

$(this).find(".sonMenu").each(function(){

var id = $(this).attr("id");

subSort ++;

menuSortArr[i] = {id:id, sort:subSort};

i ++ ;

});

$(this).find(".parent-menu-item-num").html("#" + sort);

});

owner.updateMenusSort(menuSortArr);

};

this.updateMenusSort = function (menuSort) {

var YII_CSRF_TOKEN =$('#YII_CSRF_TOKEN').val();

$.post('index.php?r=shop/DragSort',{data:menuSort, YII_CSRF_TOKEN:YII_CSRF_TOKEN},function(ret){

if (200 == ret.code) {

initData = ret.data.menus;

owner.Initialize();

} else {

alert(ret.message)

}

},'json');

};

$(".phone-right").dragsort({

dragSelector: ".mask-left",

dragBetween: true,

dragEnd: owner.evenDrag,//拖动完成后做的事

placeHolderTemplate: "

"

});

php代码

/**

* Banner拖动排序

*/

public function actionDragSort()

{

$data = request()->getPost("data");

if($data){

foreach ($data as $row) {

$bannerInfo = array( 'position' => $row['sort']);

$ret = ShopModule::Instance()->addBanner($bannerInfo, $row['id']);

}

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值