helper function: still broken: trying to drag multiple rows from one table to another
broken
HTML
<button id='foo' onclick='clearConsole();'>clear console</button>
<div id="console">console log type thing</div>
<p>
<table class="DraggableThings">
<tr draggable='true'>
<td >Row 1</td>
<td>Hello</td>
</tr>
<tr draggable='true'><td >Row 2</td><td>Hello</td></tr>
<tr draggable='true'><td >Row 3 </td><td>Hello</td></tr>
</table>
<table id='menu_table'>
<tbody>
<tr>
<td class='droppableItem' >accomplished</td>
</tr>
</tbody>
</table>
CSS
table {
width:200px;
border: brown 1px solid;
padding:5px;
}
table tr {
background-color:#FCF6CF;
}
.selected {
background-color: #ECB;
}
JavaScript
function clearConsole() {
$('#console').html(" ");
}
function log(msg) {
var oldmsg = $('#console').html();
var newmsg = msg + "<br>" + oldmsg;
$('#console').html(newmsg);
}
function dump(object) {
var output = '';
for (var property in object) {
if ( object[property] !== null )
output += property + ': ' + object[property] + '; ';
}
return output;
}
$('.droppableItem')
.bind('dragenter dragover', false)
.bind('drop', function(event){
accomplished($(this),event);
});
$('.DraggableThings tr').bind('click', function () {
$(this).toggleClass("selected");
});
$('.DraggableThings tr').bind('dragstart', function(event){
var mytext = event.target.innerText;
event.originalEvent.dataTransfer.setData('txt', mytext );
});
/*$(".DraggableThings tr").on("draginit", function(event, drag){
var things = $('.selected');
log(things);
return $('.selected');
})*/
$('.DraggableThings tr').drag("init", function () {
//log("draginit");
return $('.selected');
}).drag(function (ev, dd) {
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
});
/*$('.DraggableThings tr').bind('drag', function(event,dd){
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
});*/
/* $('.DraggableThings tr').draggable({
helper: function(){
var selected = $('.selected');//.parents('tr');
if (selected.length === 0) {
selected = $(this);
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
}); */
function accomplished(thing,event) {
event.dataTransfer = event.originalEvent.dataTransfer;
var data = event.dataTransfer.getData('txt');
log(data + " made it to accomplishments");
}