mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-14 13:33:14 +00:00
193 lines
7.0 KiB
HTML
193 lines
7.0 KiB
HTML
<!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=utf-8">
|
|
<title>Reorder Rows with Drag and Drop</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/fonts-min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
|
<script type="text/javascript" src="../../build/datatable/datatable-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
/* custom styles for this example */
|
|
.custom-class {
|
|
opacity: 0.6;filter:alpha(opacity=60);
|
|
color:blue;
|
|
border: 2px solid gray;
|
|
}
|
|
|
|
#datatable tr {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
<cite class="byline">The code for the <code>DDRows</code> class and this example has been contributed to YUI by Gonzalo Cordero, <a target="_blank" href="http://yuiblog.com/blog/2007/12/06/juku/">Juku</a> graduate and Front-End Engineer on the Yahoo! Flex Force team who is currently working on the next generation of Yahoo! homepage.</cite>
|
|
|
|
<h1>Reorder Rows with Drag and Drop</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>Reorder rows of a DataTable with Drag and Drop.</p>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<div id="datatable"></div>
|
|
|
|
<script type="text/javascript" src="assets/js/data.js"></script>
|
|
<script type="text/javascript">
|
|
YAHOO.util.Event.addListener(window, "load", function() {
|
|
YAHOO.example.ReorderRows = function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event,
|
|
DDM = YAHOO.util.DragDropMgr,
|
|
myColumnDefs = [
|
|
{key:"id"},
|
|
{key:"date", formatter:"date"},
|
|
{key:"quantity", formatter:"number"},
|
|
{key:"amount", formatter:"currency"},
|
|
{key:"title"}
|
|
],
|
|
myDataSource = new YAHOO.util.LocalDataSource(
|
|
YAHOO.example.Data.bookorders,
|
|
{responseSchema: {fields: ["id","date","quantity","amount","title"]}}
|
|
),
|
|
myDataTable = new YAHOO.widget.DataTable("datatable", myColumnDefs, myDataSource, {caption:"YUI Datatable/DragDrop"}),
|
|
myDTDrags = {};
|
|
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
// Custom drag and drop class
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
YAHOO.example.DDRows = function(id, sGroup, config) {
|
|
YAHOO.example.DDRows.superclass.constructor.call(this, id, sGroup, config);
|
|
Dom.addClass(this.getDragEl(),"custom-class");
|
|
this.goingUp = false;
|
|
this.lastY = 0;
|
|
};
|
|
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
// DDRows extends DDProxy
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
YAHOO.extend(YAHOO.example.DDRows, YAHOO.util.DDProxy, {
|
|
proxyEl: null,
|
|
srcEl:null,
|
|
srcData:null,
|
|
srcIndex: null,
|
|
tmpIndex:null,
|
|
|
|
startDrag: function(x, y) {
|
|
var proxyEl = this.proxyEl = this.getDragEl(),
|
|
srcEl = this.srcEl = this.getEl();
|
|
|
|
this.srcData = myDataTable.getRecord(this.srcEl).getData();
|
|
this.srcIndex = srcEl.sectionRowIndex;
|
|
// Make the proxy look like the source element
|
|
Dom.setStyle(srcEl, "visibility", "hidden");
|
|
proxyEl.innerHTML = "<table><tbody>"+srcEl.innerHTML+"</tbody></table>";
|
|
},
|
|
|
|
endDrag: function(x,y) {
|
|
var position,
|
|
srcEl = this.srcEl;
|
|
|
|
Dom.setStyle(this.proxyEl, "visibility", "hidden");
|
|
Dom.setStyle(srcEl, "visibility", "");
|
|
},
|
|
|
|
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) {
|
|
// Reorder rows as user drags
|
|
var srcIndex = this.srcIndex,
|
|
destEl = Dom.get(id),
|
|
destIndex = destEl.sectionRowIndex,
|
|
tmpIndex = this.tmpIndex;
|
|
|
|
if (destEl.nodeName.toLowerCase() === "tr") {
|
|
if(tmpIndex !== null) {
|
|
myDataTable.deleteRow(tmpIndex);
|
|
}
|
|
else {
|
|
myDataTable.deleteRow(this.srcIndex);
|
|
}
|
|
|
|
myDataTable.addRow(this.srcData, destIndex);
|
|
this.tmpIndex = destIndex;
|
|
|
|
DDM.refreshCache();
|
|
}
|
|
}
|
|
});
|
|
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
// Create DDRows instances when DataTable is initialized
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
myDataTable.subscribe("initEvent", function() {
|
|
var i, id,
|
|
allRows = this.getTbodyEl().rows;
|
|
|
|
for(i=0; i<allRows.length; i++) {
|
|
id = allRows[i].id;
|
|
// Clean up any existing Drag instances
|
|
if (myDTDrags[id]) {
|
|
myDTDrags[id].unreg();
|
|
delete myDTDrags[id];
|
|
}
|
|
// Create a Drag instance for each row
|
|
myDTDrags[id] = new YAHOO.example.DDRows(id);
|
|
}
|
|
});
|
|
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
// Create DDRows instances when new row is added
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
myDataTable.subscribe("rowAddEvent",function(e){
|
|
var id = e.record.getId();
|
|
myDTDrags[id] = new YAHOO.example.DDRows(id);
|
|
})
|
|
}();
|
|
});
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|