`
ieblaze
  • 浏览: 30592 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类

jQuery Ui 拖拽排序实现

 
阅读更多

感觉使用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拖拽效果

    "JQueryUI拖拽效果"是其中的一个核心功能,它允许用户通过简单的API调用来实现元素在页面上的拖放操作。 1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素...

    jquery ui实现拖动排序

    《jQuery UI实现拖动排序详解》 在网页开发中,我们常常需要实现用户可以自由调整元素顺序的功能,比如列表项的拖动排序。jQuery UI库提供了一种简单易用的解决方案,即Draggable和Droppable组件,可以方便地实现...

    jqueryUi的拖拽排序插件 jquery-ui-sortable.js

    jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用

    jquery ui拖拽 克隆

    在本教程中,我们将深入探讨如何使用jQuery UI实现拖拽(dragging)和克隆(cloning)功能,尤其是如何在拖拽过程中实现元素的复制。 首先,要使用jQuery UI的拖拽功能,你需要在你的HTML页面中引入jQuery库和...

    jQuery UI可拖拽排序的时间行程表

    在时间行程表插件中,jQuery UI的拖放(Draggable)和排序(Sortable)功能被用来实现日程项的拖拽和重新排序。拖放功能允许用户抓取一个元素并将其移动到新的位置,而排序功能则确保了在拖放过程中元素之间的顺序...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    jQuery UI拖拽信息到Table表格特效

    综上所述,"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`,我们可以创建出一个直观、用户友好的界面,使用户能够轻松地将信息添加到表格中...

    bootstrap&jQueryUI例子

    jQuery UI 提供了各种可拖动、可排序、可调整大小的组件,如日期选择器、滑块、对话框、进度条等。它还包含了一些动画效果和实用的工具函数,如特效库、位置和尺寸计算等。jQuery UI 的组件可以与 Bootstrap 结合...

    jQuery UI组件 jQuery UI

    9. **Sortable(可排序)**:用于列表或表格元素的排序,用户可以通过拖拽调整元素顺序。 10. **Autocomplete(自动补全)**:在输入框中输入时,自动给出匹配的建议列表,提高用户输入效率。 ### 使用方法 ...

    jQuery批量图片拖动排序和查看

    拖动排序是通过jQuery UI库中的`draggable()`和`droppable()`方法实现的。`draggable()`使元素可拖动,而`droppable()`定义了接收拖动元素的目标区域。在这个应用中,用户可以选取多张图片并进行拖动,以改变图片...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    在本文中,我们将深入探讨如何使用jQuery UI的Draggable插件来实现浮动div的拖动排列布局。jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如对话框、日期选择器和拖放...

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    jquery ui & themes

    3. **拖放(Draggable/Droppable)**:jQuery UI实现了元素的拖放功能,允许用户将一个元素拖动到另一个元素上,常用于构建可交互的布局或者文件管理器等应用。 4. **排序(Sortable)**:这个功能允许用户对列表或...

    jquery图片拖拽排序ajax更新排序顺序

    综上所述,实现“jquery图片拖拽排序ajax更新排序顺序”的主要步骤包括使用jQuery的`.draggable()`和`.droppable()`方法实现拖拽排序,利用CSS和jQuery处理删除图标的显示与隐藏,以及通过Ajax请求和服务器端处理来...

    web流程设计器(jsplumb+jqueryUI)拖拽功能

    拖拽功能是通过结合使用jsPlumb和jQuery UI实现的。首先,jQuery UI的draggable插件使流程图的各个节点可以被用户拖动。然后,jsPlumb负责处理节点间的连接,确保在拖动过程中连接的动态更新。当节点位置改变时,...

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    jQuery UI Multiselect (jQuery UI 多选框)

    - **拖放排序**:用户可以拖动已选择的项目来调整它们的顺序,这在需要维护特定顺序的场景下非常有用。 - **主题支持**:继承自jQuery UI,该插件能够无缝地与各种jQuery UI主题搭配,确保与页面其他组件的视觉一致...

    jQuery UI拖拽到Table表格特效.zip

    在“jQuery UI拖拽到Table表格特效”中,我们可以将页面上的任意元素(如文本、图片或者自定义对象)拖动到表格的特定单元格内,实现动态添加数据或调整数据布局的效果。这个特效的核心在于jQuery UI的`draggable`和...

    jQuery UI表格内容拖拽代码.zip

    《jQuery UI表格内容拖拽实现详解》 在Web开发中,提升用户体验往往是一个重要的目标,尤其是在处理大量数据的表格时。jQuery UI库提供了一系列强大的工具,使得开发者能够轻松实现交互式功能,例如拖放操作。本篇...

Global site tag (gtag.js) - Google Analytics