问题描述:

Currently working on dragging and dropping of td in table using jquery ui.

There are 3 columns and 3 rows in table.

  1. In 1st case, In Last column if we drag any cell and drop it in same column it can be clone and drop in same column by creating new row and rowspan with other td in above tr
  2. In 2nd case , If drag cell from 2nd column then it will drag that cell and right closest cell by cloning and drop by creating new row and rowspan with other td in above tr.
  3. In 3rd case , If drag cell from 1st column then it will drag and clone whole row and drop it.

I had done with the first case. But not able to find the solution for 2nd and 3rd case.

Please find the below link for your reference.

 var previd, firstid,nextid, rowSpanPrev, rowSpanFirst,rowSpanNext;

$(document).ready(function () {

// var helper = $("#td01").draggable("option", "helper");

$('td').attr('rowspan', '1');

//////////////////////////////////////////////////// For 1 St Column Drag And Drop////////////////////////////////////////////////////

$(".red").parent().draggable({ helper: 'clone',

cursor: "move",

start: function (event, ui) {

$(this).css('background-color', '#F6CECE');

//alert($(event.id));

},

stop: function (event, ui) {

$(this).css('background-color', 'white');

}

});

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

$(".red").parent().droppable({

accept: ".tr",

activate: function (event, ui) {

$(this).position('top');

$(this).css('offset', 'top');

},

over: function (event, ui) {

// previd = $(this).closest('td').prev().attr('id');

// nextid = $(this).closest('td').next().attr('id');

$(this).css('background-color', '#F6CECE');

},

out: function (event, ui) {

$(this).css('background-color', 'white');

},

drop: function (event, ui) {

$(this).closest('tr').after($(ui.draggable).clone().css('background-color', 'white').html());

$(this).css('background-color', 'white');

}

});

//////////////////////////////////////////////////// For 2 nd Column Drag And Drop////////////////////////////////////////////////////

$(".blue").draggable({ helper: 'clone',

cursor: "move",

start: function (event, ui) {

$(this).css('background-color', '#E0F8EC');

},

stop: function (event, ui) {

$(this).css('background-color', 'white');

}

});

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

$(".blue").droppable({

accept: ".blue",

activate: function (event, ui) {

$(this).position('top');

$(this).css('offset', 'top');

},

over: function (event, ui) {

previd = $(this).closest('td').prev().attr('id');

// nextid = $(this).closest('td').next().attr('id');

$(this).css('background-color', '#E0F8EC');

},

out: function (event, ui) {

$(this).css('background-color', 'white');

},

drop: function (event, ui) {

rowSpanPrev = parseInt($(previd).attr('rowspan'));

// rowSpanNext = parseInt($(nextid).attr('rowspan'));

var objPrev = document.getElementById(previd);

// var objNext = document.getElementById(nextid);

rowSpanPrev = objPrev.getAttribute('rowspan');

// rowSpanNext = objNext.getAttribute('rowspan');

if (isNaN(rowSpanPrev)) {

rowSpanPrev = "";

}

// if (isNaN(rowSpanNext)) {

// rowSpanNext = "";

// }

$(this).css('background-color', 'yellow');

if (rowSpanPrev == '') {

rowSpanPrev = 1;

}

if (!isNaN(parseInt(rowSpanPrev))) {

rowSpanPrev = parseInt(rowSpanPrev) + 1;

document.getElementById(previd).rowSpan = rowSpanPrev;

}

$(this).closest('tr').after('<tr><td>' + $(ui.draggable).clone().css('background-color', 'white').html() + '</td><td></td></tr>');

$(this).css('background-color', 'white');

}

});

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

//////////////////////////////////////////////////// For 3 rd Column Drag And Drop////////////////////////////////////////////////////

$(".green").draggable({ helper: 'clone',

cursor: "move",

start: function (event, ui) {

$(this).css('background-color', 'yellow');

},

stop: function (event, ui) {

$(this).css('background-color', 'white');

}

});

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

$(".green").droppable({

accept: ".green",

activate: function (event, ui) {

$(this).position('top');

$(this).css('offset', 'top');

},

over: function (event, ui) {

previd = $(this).closest('td').prev().attr('id');

firstid = $(this).closest('td').prev().prev().attr('id');

$(this).css('background-color', 'yellow');

},

out: function (event, ui) {

$(this).css('background-color', 'white');

},

drop: function (event, ui) {

rowSpanPrev = parseInt($(previd).attr('rowspan'));

rowSpanFirst = parseInt($(firstid).attr('rowspan'));

var objPrev = document.getElementById(previd);

var objFirst = document.getElementById(firstid);

rowSpanPrev = objPrev.getAttribute('rowspan');

rowSpanFirst = objFirst.getAttribute('rowspan');

if (isNaN(rowSpanPrev)) {

rowSpanPrev = "";

}

if (isNaN(rowSpanFirst)) {

rowSpanFirst = "";

}

$(this).css('background-color', 'yellow');

if (rowSpanPrev == '' || rowSpanFirst == '') {

rowSpanPrev = 1;

rowSpanFirst = 1;

}

if (!isNaN(parseInt(rowSpanPrev)) || !isNaN(parseInt(rowSpanFirst))) {

rowSpanPrev = parseInt(rowSpanPrev) + 1;

rowSpanFirst = parseInt(rowSpanFirst) + 1;

document.getElementById(previd).rowSpan = rowSpanPrev;

document.getElementById(firstid).rowSpan = rowSpanFirst;

}

$(this).closest('tr').after('<tr><td>' + $(ui.draggable).clone().css('background-color', 'white').html() + '</td</tr>');

$(this).css('background-color', 'white');

}

});

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

});

 .tbl

{

border: thin solid black;

}

body

{

font: normal 11px auto "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

background: #E6EAE9;

}

a

{

color: #c75f3e;

}

#mytable

{

width: 700px;

padding: 0;

margin: 0;

}

caption

{

padding: 0 0 5px 0;

width: 700px;

font: italic 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;

text-align: right;

}

th

{

font: bold 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

border-top: 1px solid #C1DAD7;

letter-spacing: 2px;

text-transform: uppercase;

text-align: left;

padding: 6px 6px 6px 12px;

background: #CAE8EA url(images/bg_header.jpg) no-repeat;

}

th.nobg

{

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

td

{

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt

{

background: #F5FAFA;

color: #797268;

}

th.spec

{

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #fff url(images/bullet1.gif) no-repeat;

font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;

}

th.specalt

{

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #f5fafa url(images/bullet2.gif) no-repeat;

font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;

color: #797268;

}

<script src="http://code.jquery.com/jquery-1.11.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<table border="1" class="tbl">

<thead>

<tr>

<td >

Name

</td>

<td>

Department

</td>

<td>

Address

</td>

</tr>

</thead>

<tbody>

<tr class="tr" id="tr01">

<td class="red" id="td01">

ABC <br/><a id="tr01_td_01_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr01_td_01_a_n" style="text-decoration:none">-</a>

</td>

<td class="blue" id="td02">

TEST1 <br/><a id="tr01_td_02_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr01_td_02_a_n" style="text-decoration:none">-</a>

</td>

<td class="green" id="td03">

IND <br/><a id="tr01_td_03_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr01_td_03_a_n" style="text-decoration:none">-</a>

</td>

</tr>

<tr class="tr" id="tr02">

<td class="red" id="td11">

PQR <br/><a id="tr02_td_01_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr02_td_01_a_n" style="text-decoration:none">-</a>

</td>

<td class="blue" id="td12">

TEST2 <br/><a id="tr02_td_02_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr02_td_02_a_n" style="text-decoration:none">-</a>

</td>

<td class="green" id="td13">

USA <br/><a id="tr02_td_03_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr02_td_03_a_n" style="text-decoration:none">-</a>

</td>

</tr>

<tr class="tr" id="tr03">

<td class="red" id="td21">

LMN <br/><a id="tr03_td_01_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr03_td_01_a_n" style="text-decoration:none">-</a>

</td>

<td class="blue" id="td22">

TEST3 <br/><a id="tr03_td_02_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr03_td_02_a_n" style="text-decoration:none">-</a>

</td>

<td class="green" id="td23">

UK <br/><a id="tr03_td_03_a_p" class="ap_f" style="text-decoration:none">+</a>&nbsp;<a class="an_f" id="tr03_td_03_a_n" style="text-decoration:none">-</a>

</td>

</tr>

</tbody>

</table>

相关阅读:
Top