<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Using Drag and Drop to Reorder a List</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="build/fonts-min.css" />
<script type="text/javascript" src="build/utilities.js"></script>
<!--begin custom header content for this example这段css是设置高度，高度必须要，因为当把div里面的元素全部移走之后，在想移回来，必须要这个高度-->
<style type="text/css">
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;
/*
The bottom padding provides the cushion that makes the empty
list targetable. Alternatively, we could leave the padding
off by default, adding it when we detect that the list is empty.
*/
padding-bottom:20px;
}
ul.draglist_alt li {
margin: 1px;
cursor: move;
}
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="user_actions">
<input type="button" id="showButton" value="Show Current Order" />
<input type="button" id="switchButton" value="Remove List Background" />
</div>
<script type="text/javascript">
(function() {
var Dom = MYSITE.util.Dom;
var Event = MYSITE.util.Event;
var DDM = MYSITE.util.DragDropMgr;
//////////////////////////////////////////////////////////////////////////////
// example app
//////////////////////////////////////////////////////////////////////////////
MYSITE.example.DDApp = {
init: function() {
var rows=3,cols=4,i,j; //设置几个
for (i=1;i<cols+1;i=i+1) {
new MYSITE.util.DDTarget("ul"+i);
}
for (i=1;i<cols+1;i=i+1) {
for (j=1;j<rows+1;j=j+1) {
new MYSITE.example.DDList("li" + i + "_" + j);
}
}
Event.on("showButton", "click", this.showOrder);
Event.on("switchButton", "click", this.switchStyles);
},
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.id + " ";
}
return out;
};
var ul1=Dom.get("ul1"), ul2=Dom.get("ul2"),ul3=Dom.get("ul3"),ul4=Dom.get("ul4"); //++++++++++
alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2") + "\n" + parseList(ul3, "List 3") + "\n" + parseList(ul4, "List 4"));
},
switchStyles: function() {
Dom.get("ul1").className = "draglist_alt";
Dom.get("ul2").className = "draglist_alt";
Dom.get("ul3").className = "draglist_alt";
Dom.get("ul4").className = "draglist_alt";
}
};
//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////
MYSITE.example.DDList = function(id, sGroup, config) {
MYSITE.example.DDList.superclass.constructor.call(this, id, sGroup, config);
this.logger = this.logger || MYSITE;
var el = this.getDragEl();
Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
this.goingUp = false;
this.lastY = 0;
};
MYSITE.extend(MYSITE.example.DDList, MYSITE.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 MYSITE.util.Motion(
proxy, {
points: {
to: Dom.getXY(srcEl)
}
},
0.2,
MYSITE.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 (MYSITE.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(MYSITE.example.DDApp.init, MYSITE.example.DDApp, true);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html> 作者: fangzhen 时间: 2009-8-21 09:58
js文件
/*
Copyright (c) 2007, MYSITE! Inc. All rights reserved.
Code licensed under the BSD License:
version: 2.3.0
*/
css文件
body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}
