感觉使用jqueryUi 进行拖拽排序比箭头移动排序要爽多了,实现了下跟大家分析下:
1 使用 jquery ui控件的 drag功能
2 实现拖拽,拖拉位置
3 循环读取当前位置的id
4 ajax到后台,依次找到位置的id 然后修改sequence
<script type="text/javascript">
var params={};
$(function() {
$( "#recommendBar" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#recommendBar",
helper: "clone",
revert: "invalid"
});
$( "#sore" ).click(function() {
$(".recomend_list .barMoving div").each(function(i){
var vals= $(this).attr("id");
var valu=i+1;
var param="L"+valu;
params[param]=vals+"";
});
$.post("<@ofbizUrl>recommendSore</@ofbizUrl>",params,ajaxFormCallback);
});
});
</script>
<ul id="recommendBar" class="recomend_list">
div class="barSetting" id="${product.getString("productId")?if_exists}"></div>
</ul>
public static String recommendSore(HttpServletRequest request, HttpServletResponse response) {
Delegator delegator = (Delegator) request.getAttribute("delegator");
List<GenericValue> leftBar=FastList.newInstance();
String partyId = ((GenericValue) request.getSession().getAttribute("userLogin")).getString("partyId");
String productStoreId=BusinessWorker.getProductStoreId(delegator, partyId);
try {
TransactionUtil.begin();
leftBar = delegator.findByAnd("YProductRecommend", UtilMisc.toMap("productStoreId", productStoreId),UtilMisc.toList("+sequence"));
if (leftBar.size() > 0) {
for (int i=0;i<leftBar.size();i++) {
int val=i+1;
String param = request.getParameter("L"+val);
GenericValue Gv=delegator.findByPrimaryKey("YProductRecommend", UtilMisc.toMap("productId", param));
Gv.put("sequence", val+"");
Gv.store();
}
}
TransactionUtil.commit();
} catch (GenericEntityException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "success";
}
分享到:
相关推荐
"JQueryUI拖拽效果"是其中的一个核心功能,它允许用户通过简单的API调用来实现元素在页面上的拖放操作。 1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素...
《jQuery UI实现拖动排序详解》 在网页开发中,我们常常需要实现用户可以自由调整元素顺序的功能,比如列表项的拖动排序。jQuery UI库提供了一种简单易用的解决方案,即Draggable和Droppable组件,可以方便地实现...
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
在本教程中,我们将深入探讨如何使用jQuery UI实现拖拽(dragging)和克隆(cloning)功能,尤其是如何在拖拽过程中实现元素的复制。 首先,要使用jQuery UI的拖拽功能,你需要在你的HTML页面中引入jQuery库和...
在时间行程表插件中,jQuery UI的拖放(Draggable)和排序(Sortable)功能被用来实现日程项的拖拽和重新排序。拖放功能允许用户抓取一个元素并将其移动到新的位置,而排序功能则确保了在拖放过程中元素之间的顺序...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...
综上所述,"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`,我们可以创建出一个直观、用户友好的界面,使用户能够轻松地将信息添加到表格中...
jQuery UI 提供了各种可拖动、可排序、可调整大小的组件,如日期选择器、滑块、对话框、进度条等。它还包含了一些动画效果和实用的工具函数,如特效库、位置和尺寸计算等。jQuery UI 的组件可以与 Bootstrap 结合...
9. **Sortable(可排序)**:用于列表或表格元素的排序,用户可以通过拖拽调整元素顺序。 10. **Autocomplete(自动补全)**:在输入框中输入时,自动给出匹配的建议列表,提高用户输入效率。 ### 使用方法 ...
拖动排序是通过jQuery UI库中的`draggable()`和`droppable()`方法实现的。`draggable()`使元素可拖动,而`droppable()`定义了接收拖动元素的目标区域。在这个应用中,用户可以选取多张图片并进行拖动,以改变图片...
在本文中,我们将深入探讨如何使用jQuery UI的Draggable插件来实现浮动div的拖动排列布局。jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如对话框、日期选择器和拖放...
jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...
3. **拖放(Draggable/Droppable)**:jQuery UI实现了元素的拖放功能,允许用户将一个元素拖动到另一个元素上,常用于构建可交互的布局或者文件管理器等应用。 4. **排序(Sortable)**:这个功能允许用户对列表或...
综上所述,实现“jquery图片拖拽排序ajax更新排序顺序”的主要步骤包括使用jQuery的`.draggable()`和`.droppable()`方法实现拖拽排序,利用CSS和jQuery处理删除图标的显示与隐藏,以及通过Ajax请求和服务器端处理来...
拖拽功能是通过结合使用jsPlumb和jQuery UI实现的。首先,jQuery UI的draggable插件使流程图的各个节点可以被用户拖动。然后,jsPlumb负责处理节点间的连接,确保在拖动过程中连接的动态更新。当节点位置改变时,...
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...
- **拖放排序**:用户可以拖动已选择的项目来调整它们的顺序,这在需要维护特定顺序的场景下非常有用。 - **主题支持**:继承自jQuery UI,该插件能够无缝地与各种jQuery UI主题搭配,确保与页面其他组件的视觉一致...
在“jQuery UI拖拽到Table表格特效”中,我们可以将页面上的任意元素(如文本、图片或者自定义对象)拖动到表格的特定单元格内,实现动态添加数据或调整数据布局的效果。这个特效的核心在于jQuery UI的`draggable`和...
《jQuery UI表格内容拖拽实现详解》 在Web开发中,提升用户体验往往是一个重要的目标,尤其是在处理大量数据的表格时。jQuery UI库提供了一系列强大的工具,使得开发者能够轻松实现交互式功能,例如拖放操作。本篇...