Bonjours tout le monde,
voila,j a'ai recupéré un script permettant de faire du drag and drop avec les lignes d'un tableau.
Je l'ai adapter pour passer d'un tableau vers un autre tableau.
Mon problème est que lorsque je lache une ligne entre 2 tableau, desfois elle retourne dans son tableau d'origine mais des fois elle se perd.
Est ce que quelqu'un pourrait m'aider ?
Voici le source:
<html>
<head>
<title>Drag & Drop Table Rows!</title>
<style type="text/css"> BODY { FONT: 9pt VERDANA,ARIAL }
H1 { FONT: 10pt VERDANA,ARIAL }
H2 { FONT: 18pt VERDANA,ARIAL }
TD { FONT: 9pt MS Sans Serif; COLOR: black; TEXT-DECORATION: none }
A { FONT: 9pt MS Sans Serif; TEXT-DECORATION: none }
.heads { FONT: 9pt MS Sans Serif; COLOR: black; TEXT-DECORATION: none }
.basic { FONT: 9pt MS Sans Serif; COLOR: black; TEXT-DECORATION: none }
A:hover { COLOR: red }
</style>
</head>
<body onload="UpdateEditorSizes(document.body)">
<SCRIPT language="JavaScript">
<!-- Begin
/* Drag & Drop Table Rows by Colin MacKenzie */
/* (http://www.colinmackenzie.net */
/* mailto:guru@colinmackenzie.net */
/* ------------------------------------------------- */
/* Please leave in this notice if you use this code! */
/* static object points to drag object if we are dragging */
var dragObject;
var X, Y;
function Document_OnMouseDown(e) {
/* try to find a parent element that is a TR tag and is marked dragable */
var element=window.event.srcElement;
while (element && (element.nodeName!="tr") && (element.drag!="enable")) {
if (element.drag=="inhibit") return;
element=element.parentElement;
}
/* if element found, enter drag mode */
if (element) {
/* find the parent table */
var parentTable = element;
while (parentTable && (parentTable.nodeName!="TABLE"))
parentTable = parentTable.parentElement;
if (!parentTable) { alert("cant find the parent TABLE!"); return }
/* create the div object we will drag */
dragObject = document.createElement("DIV");
dragObject.style.position = "absolute";
dragObject.style.pixelLeft = event.clientX;
dragObject.style.pixelTop = event.clientY;
/* save a reference to the dragging rows parent */
dragObject.parentTable = parentTable;
dragObject.dragRow = element;
/* save reference to the TR at which we just left in case user instantly drops the row */
dragObject.insertMarker = document.createElement("DIV");
dragObject.insertMarker.insertPoint = element.nextSibling;
dragObject.insertMarker.insertBody = element.parentElement;
/* create the table element within the div tag and set its
properties equal to dragging rows parent table */
var eTable = document.createElement("TABLE");
eTable.style.width = parentTable.offsetWidth;
eTable.border = parentTable.border;
eTable.cellpadding = parentTable.cellpadding;
eTable.cellspacing = parentTable.cellspacing;
/* add the TR tag to the drag object and save a reference to it */
var tBody = eTable.appendChild( document.createElement("tBODY"));
var eRow = tBody.insertRow()
eRow.replaceNode(element);
dragObject.appendChild(eTable);
/* shrink the row for dragging */
dragObject.style.zoom = "0.6";
/* add div tag to document */
document.body.appendChild(dragObject);
/* store the x and y position the mouse down event happened at within the drag Object */
X=event.offsetX;
Y=event.offsetY;
}
}
function Document_OnMouseMove(e) {
if (dragObject) {
/* update the dragging cell */
dragObject.style.pixelLeft = event.clientX + document.body.scrollLeft+5;
dragObject.style.pixelTop = event.clientY + document.body.scrollTop+5;
/* remove any old insert marker */
if (dragObject.insertMarker)
dragObject.insertMarker.removeNode(true);
/* find out if we are hovering over a tr cell */
// On récupère la source de l'élément
element = window.event.srcElement;
/*Tant que l'élément est différent d'une ligne de tableau
et que cette ligne de tableau n'est pas draggable*/
while (element && (element.nodeName!="tr") && (element.drag!="enable")) {
//Si le drag sur l'élément est interdit
if (element.drag=="inhibit") return;
element=element.parentElement;
}
/* draw a red line snapped to the row insert position */
if (element) {
/* create the div object we will drag */
var insertMarker = document.createElement("DIV");
insertMarker.style.position = "absolute";
/* mark the TR at which the marker is referencing */
insertMarker.insertPoint = element;
insertMarker.insertBody = element.parentElement;
/* set the html inside the insert marker */
insertMarker.innerHTML = "<table border=0 cellpadding=0 cellspacing=0><tr><td><img src=images/leftDragArrow.gif border=0></td><td><img src=images/dragLine.gif border=0 width="+element.offsetWidth+" height=9></td><td><img src=images/rightDragArrow.gif border=0></td></tr></table>";
/* size the insert marker */
insertMarker.style.pixelLeft = element.offsetLeft + element.offsetParent.offsetLeft - 9;
insertMarker.style.pixelWidth = element.offsetWidth+18;
insertMarker.style.pixelTop = element.offsetTop + element.offsetParent.offsetTop - 4;
/* if we are more than halfway down this TR place at top of next TR */
if (event.clientY-insertMarker.style.pixelTop > element.offsetHeight/2) {
insertMarker.style.pixelTop += element.offsetHeight;
insertMarker.insertPoint = element.nextSibling;
}
/* add the insert marker to the document */
dragObject.insertMarker = document.body.appendChild(insertMarker);
}
return false;
}
}
function Document_OnMouseUp() {
if (dragObject) {
/* delete the drag object */
dragObject.removeNode(true)
/* insert at the point at which the marker is */
if (dragObject.insertMarker) {
var afterRow = dragObject.insertMarker.insertPoint;
var newRow = dragObject.insertMarker.insertBody.insertRow(dragObject.insertMarker.insertPoint ? dragObject.insertMarker.insertPoint.rowIndex : -1);
newRow.replaceNode(dragObject.dragRow);
}
/* remove any old insert marker */
if (dragObject.insertMarker)
dragObject.insertMarker.removeNode(true)
/* stop dragging */
dragObject = null;
}
}
function UpdateEditorSize() {
var element = window.event.srcElement;
var oTextRange = element.createTextRange();
var lines = oTextRange.getClientRects();
element.rows = lines.length+1;
}
function UpdateEditorSizes(element) {
/* update all textarea objects within element */
while (element) {
if (element.nodeName=="TEXTAREA")
element.fireEvent("OnPropertyChange");
else if (element.children && element.children.length>0)
UpdateEditorSizes(element.firstChild);
element = element.nextSibling;
}
}
document.onmousedown = Document_OnMouseDown;
document.onmousemove = Document_OnMouseMove;
document.onmouseup = Document_OnMouseUp;
// End -->
</SCRIPT>
<!-- Tableau d'arrivé-->
<TABLE id="Table1" style="LEFT: 312px; POSITION: absolute; TOP: 16px" height="152" cellSpacing="0" cellPadding="0" width="232" border="1">
<TR ondragenter="fnCancelDefault()" ondragover="fnCancelDefault()" drag="enable">
<TD height="50">
<TABLE id="Table2" height="50" width="100%" border="0">
<TR bgColor="#f0f0ff" height="10">
<TD align="left" width="80%" height="5"><B>ID Perlinpinpin</B></TD>
</TR>
<TR>
<TD vAlign="center" align="middle" colSpan="2">Perlinpinpin</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR ondragenter="fnCancelDefault()" ondragover="fnCancelDefault()" drag="enable">
<TD height="2">
<TABLE id="Table3" height="50" width="100%" border="0">
<TR bgColor="#f0f0ff" height="10">
<TD align="left" width="80%" height="3"><B>ID Perlintsouintsouin</B></TD>
</TR>
<TR>
<TD vAlign="center" align="middle" colSpan="2">Perlintsouintsouin</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR ondragenter="fnCancelDefault()" ondragover="fnCancelDefault()" drag="enable">
<TD height="3">
<TABLE id="Table4" height="50" width="100%" border="0">
<TR bgColor="#f0f0ff" height="10">
<TD align="left" width="80%"><B>ID John</B></TD>
</TR>
<TR>
<TD vAlign="center" align="middle" colSpan="2">John</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- Tableau de départ-->
<table height="152" cellSpacing="0" cellPadding="0" width="232" border="1">
<tr drag="enable">
<td height="50">
<table height="50" width="100%" border="0">
<tr bgColor="#f0f0ff" height="10">
<td align="left" width="80%" height="5"><b>ID Sylvain</b></td>
</tr>
<tr>
<td vAlign="center" align="middle" colSpan="2">Sylvain</td>
</tr>
</table>
</td>
</tr>
<tr drag="enable">
<td height="2">
<table height="50" width="100%" border="0">
<tr bgColor="#f0f0ff" height="10">
<td align="left" width="80%" height="3"><b>ID Xavier</b></td>
</tr>
<tr>
<td vAlign="center" align="middle" colSpan="2">Xavier</td>
</tr>
</table>
</td>
</tr>
<tr drag="enable">
<td height="3">
<table height="50" width="100%" border="0">
<tr bgColor="#f0f0ff" height="10">
<td align="left" width="80%"><b>ID Pascal</b></td>
</tr>
<tr>
<td vAlign="center" align="middle" colSpan="2">Pascal</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>