拖动层+保存

来源：互联网发布：edusoho 源码编辑：程序博客网时间：2024/05/16 06:34

前台HTML代码

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="test.WebForm1"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Using Drag and Drop to Reorder a List</title>

body {

margin:0;

padding:0;

}

</style>

div.workarea { padding:10px; float:left }

ul.draglist {

position: relative;

width: 200px;

height:240px;

background: #f7f7f7;

border: 1px solid gray;

list-style: none;

margin:0;

padding:0;

}

ul.draglist li {

margin: 1px;

cursor: move;

}

ul.draglist_alt {

position: relative;

width: 200px;

list-style: none;

margin:0;

padding:0;

padding-bottom:20px;

}

ul.draglist_alt li {

margin: 1px;

cursor: move;

}

li {

background-color: #D1E6EC;

border:1px solid #7EA6B2;

}

#user_actions { float: right; }

</style>

</head>

<body>

dim i,j

dim rs As New ADODB.Recordset

sql = "select * from Layouts where ulID=1 order by liID asc"

rs.Open(sql, conn, 1, 1)

For i = 1 To rs.RecordCount

<li id='li1_<%=i%>'value='<%=rs("ID").Value%>'><%=rs("ItemID").value%></li>

rs.MoveNext()

rs.Close()

</ul>

</div>

sql = "select * from Layouts where ulID=2 order by liID asc"

rs.Open(sql, conn, 1, 1)

For j = 1 To rs.RecordCount

<li id='li2_<%=j%>'value='<%=rs("ID").Value%>'><%=rs("ItemID").value%></li>

rs.MoveNext()

rs.Close()

</ul>

</div>

</div>

(function() {

var Dom = YAHOO.util.Dom;

var Event = YAHOO.util.Event;

var DDM = YAHOO.util.DragDropMgr;

//////////////////////////////////////////////////////////////////////////////

// example app

//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDApp = {

init: function() {

var rows=6,cols=2,i,j; //设置几个

for (i=1;i<cols+1;i=i+1) {

new YAHOO.util.DDTarget("ul"+i);

}

for (i=1;i<cols+1;i=i+1) {

for (j=1;j<rows+1;j=j+1) {

new YAHOO.example.DDList("li" + i + "_" + j);

}

Event.on("showButton", "click", this.showOrder);

Event.on("switchButton", "click", this.switchStyles);

Event.on("SaveLayout", "click", this.SaveLayout);

showOrder: function() {

var parseList = function(ul, title) {

var items = ul.getElementsByTagName("li");

var out = title + ": ";

for (i=0;i<items.length;i=i+1) {

out += items[i].id + " ";

}

return out;

};

var ul1=Dom.get("ul1"), ul2=Dom.get("ul2"); //++++++++++

alert(parseList(ul1, "List 1") + " " + parseList(ul2, "List 2"));

SaveLayout: function() {

var parseList = function(ul, title) {

var items = ul.getElementsByTagName("li");

var out =title +" ";

for (i=0;i<items.length;i=i+1) {

out +="," + items[i].value ;

}

return out;

};

var d=document.forms(0);

var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");

var str=parseList(ul1, "L1");

var str1=parseList(ul2, "L2");

window.location.href("?Code=9527&L1="+str+"&L2="+str1);

} ,

switchStyles: function() {

Dom.get("ul1").className = "draglist_alt";

Dom.get("ul2").className = "draglist_alt";

}

};

//////////////////////////////////////////////////////////////////////////////

// custom drag and drop implementation

//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDList = function(id, sGroup, config) {

YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);

this.logger = this.logger || YAHOO;

var el = this.getDragEl();

Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

this.goingUp = false;

this.lastY = 0;

};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

startDrag: function(x, y) {

this.logger.log(this.id + " startDrag");

// make the proxy look like the source element

var dragEl = this.getDragEl();

var clickEl = this.getEl();

Dom.setStyle(clickEl, "visibility", "hidden");

dragEl.innerHTML = clickEl.innerHTML;

Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));

Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));

Dom.setStyle(dragEl, "border", "2px solid gray");

endDrag: function(e) {

var srcEl = this.getEl();

var proxy = this.getDragEl();

// Show the proxy element and animate it to the src element's location

Dom.setStyle(proxy, "visibility", "");

var a = new YAHOO.util.Motion(

proxy, {

points: {

to: Dom.getXY(srcEl)

}

0.2,

YAHOO.util.Easing.easeOut

)

var proxyid = proxy.id;

var thisid = this.id;

// Hide the proxy and show the source element when finished with the animation

a.onComplete.subscribe(function() {

Dom.setStyle(proxyid, "visibility", "hidden");

Dom.setStyle(thisid, "visibility", "");

});

a.animate();

onDragDrop: function(e, id) {

// If there is one drop interaction, the li was dropped either on the list,

// or it was dropped on the current location of the source element.

if (DDM.interactionInfo.drop.length === 1) {

// The position of the cursor at the time of the drop (YAHOO.util.Point)

var pt = DDM.interactionInfo.point;

// The region occupied by the source element at the time of the drop

var region = DDM.interactionInfo.sourceRegion;

// Check to see if we are over the source element's location. We will

// append to the bottom of the list once we are sure it was a drop in

// the negative space (the area of the list without any list items)

if (!region.intersect(pt)) {

var destEl = Dom.get(id);

var destDD = DDM.getDDById(id);

destEl.appendChild(this.getEl());

destDD.isEmpty = false;

DDM.refreshCache();

}

onDrag: function(e) {

// Keep track of the direction of the drag for use during onDragOver

var y = Event.getPageY(e);

if (y < this.lastY) {

this.goingUp = true;

} else if (y > this.lastY) {

this.goingUp = false;

}

this.lastY = y;

onDragOver: function(e, id) {

var srcEl = this.getEl();

var destEl = Dom.get(id);

// We are only concerned with list items, we ignore the dragover

// notifications for the list.

if (destEl.nodeName.toLowerCase() == "li") {

var orig_p = srcEl.parentNode;

var p = destEl.parentNode;

if (this.goingUp) {

p.insertBefore(srcEl, destEl); // insert above

} else {

p.insertBefore(srcEl, destEl.nextSibling); // insert below

}

DDM.refreshCache();

}

});

Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

})();

</script>

</form>

</body>

</html>

后台 VB 代码

Public Class WebForm1

Inherits System.Web.UI.Page

Protected conn As New ADODB.Connection

Public sql, Lists As String

Web 窗体设计器生成的代码

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

'在此处放置初始化页的用户代码

Dim Connstr = "Provider=SQLOLEDB.1;Persist Security Info=False;data source=.;initial catalog=Test;user id=sa;password=111111"

conn.Open(Connstr)

Dim L1 = Request("L1")

Dim L2 = Request("L2")

If IsNumeric(Request("Code")) And Request("Code") = "9527" Then

Response.Write(L1 & L2 & "<br>")

If SaveLayout(L1, 1) And SaveLayout(L2, 2) Then

Response.Redirect("WebForm1.aspx")

Else

Response.Write("<script>alert('系统错误，请返回！');window.history.back(-1);</script>")

End If

End Sub

Private Function SaveLayout(ByVal str As String, ByVal ulID As Int32) As Boolean

Dim temp As String()

Dim strTemp As String

Dim i, j As Int32

temp = str.Split(",")

j = str.Split(",").Length

For i = 1 To temp.Length - 1

strTemp = "Update Layouts set ulID=" & ulID & ",liID=" & i & " where id=" & temp(i)

'Response.Write(strTemp)

conn.Execute(strTemp)

SaveLayout = True

End Function

End Class

数据库

Database "Test"

TableName "Layouts"

id ulID liID ItemID

1 2 1 dsafas

JS不是我写的，，弄这个花了我近一天的时间，网上又找不到，拿来和大家分享，