javascript - jQuery drag and drop extend item -
i trying create html table in can drag , drop items cell cell. managed find related code , modified example , result:
html:
<table id="#our_table" border="1"> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> <tr> <td><span class="event" id="item1" draggable="true">item 1</span> </td> <td><span class="event" id="item2" draggable="true">item 2</span> <span class="event" id="item3" draggable="true">item 3</span> </td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr>
css:
table th, table td { width: 200px; height:70px; padding: 5px; } table span { display:block; background-color: #ccc; border: 1px solid black; color: fff; height: 30px; width: 100%; }
javascript:
$(document).ready(function () { $('.event').on("dragstart", function (event) { var dt = event.originalevent.datatransfer; dt.setdata('text', $(this).attr('id')); }); $('table td').on("dragenter dragover drop", function (event) { event.preventdefault(); if (event.type === 'drop') { var data = event.originalevent.datatransfer.getdata('text', $(this).attr('id')); de = $('#' + data).detach(); if (event.originalevent.target.tagname === "span") { de.insertbefore($(event.originalevent.target)); } else { de.appendto($(this)); } }; }); })
- what need add is: extend span items horizontally on multiple cells on html table row drag , drop.
- click , hold right edge of span item , extend on 2 or more cells in row.
how can this?
Comments
Post a Comment