主页自定义可拖动组件 1.0版本（jquery-ui-sortable）

本文链接：https://blog.csdn.net/u012560410/article/details/20543141

1.0版本：

介绍：可自定义组件，自定义组件的横坐标和纵坐标及组件显示的内容，显示在页面上。

先看效果吧

目前我只录了这六条数据，名称是录入的次序，括号里是录入组件我所设定的坐标。都能看懂吧？

录入的数据：

为了写这个组件页面，脑子都快坏玩了，浆糊啊浆糊。脑子太不灵光了

OK，下面开始：

首先，要把录入的数据存在一个List里，要注意，必须按横坐标和纵坐标排序

@Service
public class WidgetManager extends BaseService<Widget, Long> {

	public List<Widget> getWidgets() {
		String sql = " select A from " + Widget.class.getName() + " A order by A.positionX , A.positionY asc";
		return searchBySql(sql);
	}

}

@RequestMapping("")
public String index(HttpServletRequest request) {
	List<Widget> widgets = widgetManager.getWidgets();
	request.setAttribute("widgets", widgets);
	return getFileBasePath() + "uiIndex";
}

页面：（最关键！！！）

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="../common/header.jsp"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<title><jdf:message code="组件首页" /></title>
<style>
	
	
	body {
		min-width: 520px;
	}
	.column {
		width: 400px;
		float: left;
	}
	.portlet {
		margin: 0 1em 1em 0;
		padding: 0.3em;
	}
	.portlet-header {
		padding: 0.2em 0.3em;
		margin-bottom: 0.5em;
		position: relative;
	}
	.portlet-toggle {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -8px;
	}
	.portlet-content {
		padding: 0.4em;
	}
	.portlet-placeholder {
		border: 1px dotted black;
		margin: 0 1em 1em 0;
		height: 50px;
	}
	li {
		list-style:none;
	}
	</style>
	<script>
	$(function() {
		$( ".draggable" ).sortable({
			connectWith: ".draggable",
			handle: ".portlet-header",
			cancel: ".portlet-toggle",
			placeholder: "portlet-placeholder ui-corner-all",
			revert:true
		});
		$( ".portlet" )
			.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

		$( ".portlet-toggle" ).click(function() {
			var icon = $( this );
			icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
			icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
		});
	});
	</script>
</head>
<body>
		<c:forEach begin="1" end="3" varStatus="num0">
            <ul id="column${num0.index}" class="column" >
                <c:forEach var="item" items="${widgets}" varStatus="num">
                    <c:if test="${item.positionY==num0.index}">
                        <li>
                            <div class="column draggable" id="widget_${item.objectId }">
                                <div class="portlet">
                                    <div class="portlet-header"  name="portlet-header">${item.name }</div>
                                    <div class="portlet-content" style="display:none;">
                                        <iframe id="widgetFrame" name="widgetFrame" src="${dynamicDomain}${item.linkUrl }?ajax=1" style="overflow: visible; height: 550px;width: 100%" scrolling="auto" frameborder="no"></iframe>
                                        <input type="hidden" name="widgetId" value="${item.objectId}">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
    	</c:forEach>
	



</body>
</html>

最后，要向大家推荐一个ui-porlet

https://github.com/henryyan/jquery-ui-portlet