AlexLL
Reputation: 195
jQuery. Drag'n'Drop rows between two tables?
I have two tables in witch I need realize Drag&Drop for table rows.
For that I used REDIPs.drag library, like in example15 in demos.
Here the simplified mirror code from my project:
<!DOCTYPE html">
<html>
<head>
<script type="text/javascript" src="redips-drag-min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
</style>
<script type="text/javascript">
var redipsInit = function () {
var rd = REDIPS.drag;
rd.init();
rd.hover.colorTd = '#FFCFAE';
rd.hover.colorTr = '#9BB3DA';
rd.hover.borderTd = '0px solid #32568E';
rd.hover.borderTr = '0px solid #32568E';
rd.rowDropMode = 'after';
rd.dropMode = 'single';
rd.event.rowMoved = function () {
rd.rowOpacity(rd.obj, 85);
rd.rowOpacity(rd.objOld, 20, 'White');
};
rd.event.rowDropped = function(targetRow, sourceTable, sourceRowIndex) {
rd.deleteObject(rd.objOld);
};
rd.event.rowDroppedSource = function () {
rd.deleteObject(rd.obj);
rd.rowOpacity(rd.objOld, 100);
};
};
function fx() {
redipsInit();
};
</script>
</head>
<body onload="fx()">
<div id="drag">
<p>
<b>First table:</b>
</p>
<TABLE ID="TABLE1" BORDER="1" CELLSPACING="0" CELLPADDING="2" style="margin-top:15px; width:30%">
<col style="text-align:center; width:50px; border: 0px" />
<col style="width:20%; text-align:center;" />
<col width="60%" />
<col width="15%" />
<THEAD>
<TH>-</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
<TH>Column 4</TH>
</THEAD>
<TBODY>
<TR style="height:45px;">
<TD class="rowhandler">
<div class="drag row">
<img src="" style="border: none;" />
</div>
</TD>
<TD>
1
</TD>
<TD>
One
</TD>
<TD>
00.00.0000
</TD>
</TR>
</TBODY>
</TABLE>
<br />
<p>
<b>Second table:</b>
</p>
<TABLE ID="TABLE2" BORDER="1" CELLSPACING="0" CELLPADDING="2" style="margin-top:15px; width:30%">
<col style="text-align:center; width:50px; border: 0px" />
<col style="width:20%; text-align:center;" />
<col width="60%" />
<col width="15%" />
<THEAD>
<TH>-</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
<TH>Column 4</TH>
</THEAD>
<TBODY>
<TR style="height:45px;">
<TD class="rowhandler">
<div class="drag row">
<img src="" style="border: none;" />
</div>
</TD>
<TD>
2
</TD>
<TD>
Two
</TD>
<TD>
11.11.1111
</TD>
</TR>
</TBODY>
</TABLE>
</div>
</body>
</html>
Just download redips-drag-min.js and put it in the same folder with sample.html.
Note: Drag rows using non-existing image icon in the first column of the row.
How I can block drop rows into or above THEAD tag?
Upvotes: -1
Views: 1129
Answers (1)
user3790692
Reputation: 72
REDIPS.drag documentation has the answer for your question.
Read it.
EDITED: You really don't read the documentation. Just put class=mark on all th in thead:
<!DOCTYPE html">
<html>
<head>
<script type="text/javascript" src="redips-drag-min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
</style>
<script type="text/javascript">
var redipsInit = function () {
var rd = REDIPS.drag;
rd.init();
rd.hover.colorTd = '#FFCFAE';
rd.hover.colorTr = '#9BB3DA';
rd.hover.borderTd = '0px solid #32568E';
rd.hover.borderTr = '0px solid #32568E';
rd.rowDropMode = 'after';
rd.dropMode = 'single';
rd.event.rowMoved = function () {
rd.rowOpacity(rd.obj, 85);
rd.rowOpacity(rd.objOld, 20, 'White');
};
rd.event.rowDropped = function(targetRow, sourceTable, sourceRowIndex) {
rd.deleteObject(rd.objOld);
};
rd.event.rowDroppedSource = function () {
rd.deleteObject(rd.obj);
rd.rowOpacity(rd.objOld, 100);
};
};
function fx() {
redipsInit();
};
</script>
</head>
<body onload="fx()">
<div id="drag">
<p>
<b>First table:</b>
</p>
<TABLE ID="TABLE1" BORDER="1" CELLSPACING="0" CELLPADDING="2" style="margin-top:15px; width:30%">
<col style="text-align:center; width:50px; border: 0px" />
<col style="width:20%; text-align:center;" />
<col width="60%" />
<col width="15%" />
<THEAD>
<TH class="mark">-</TH>
<TH class="mark">Column 2</TH>
<TH class="mark">Column 3</TH>
<TH class="mark">Column 4</TH>
</THEAD>
<TBODY>
<TR style="height:45px;">
<TD class="rowhandler">
<div class="drag row">
<img src="" style="border: none;" />
</div>
</TD>
<TD>
1
</TD>
<TD>
One
</TD>
<TD>
00.00.0000
</TD>
</TR>
</TBODY>
</TABLE>
<br />
<p>
<b>Second table:</b>
</p>
<TABLE ID="TABLE2" BORDER="1" CELLSPACING="0" CELLPADDING="2" style="margin-top:15px; width:30%">
<col style="text-align:center; width:50px; border: 0px" />
<col style="width:20%; text-align:center;" />
<col width="60%" />
<col width="15%" />
<THEAD>
<TH class="mark">-</TH>
<TH class="mark">Column 2</TH>
<TH class="mark">Column 3</TH>
<TH class="mark">Column 4</TH>
</THEAD>
<TBODY>
<TR style="height:45px;">
<TD class="rowhandler">
<div class="drag row">
<img src="" style="border: none;" />
</div>
</TD>
<TD>
2
</TD>
<TD>
Two
</TD>
<TD>
11.11.1111
</TD>
</TR>
</TBODY>
</TABLE>
</div>
</body>
</html>
Upvotes: 0
Related Questions
- Drag and drop from a table
- JQuery Drag and Drop from two tables
- Drag and drop in table rows using jQuery
- drag and drop of table rows between two similar table in jquery with draggable and droppable
- Dragging rows between tables
- JQuery: How to drag multiple rows from one table to another?
- Drag and drop multiple rows from one table to another table
- Drag and Drop Table Rows Using Javascript
- How to program drag and drop between two tables
- drag n drop between two tables