Jquery Drag-drop (getting Element Being Dropped Into)
I am trying to detect which cell an object is being dropped into.
Solution 1:
I couldn't get dropping to work inside of cells - I even tried putting divs inside each of the cells. If you drop the draggable div into the droppable div this code will work:
$(".draggable").draggable();
$(".droppable").droppable({
drop: function(event, ui) {
$(this).html('Dropped!');
}
});
<table><tr><tdclass="weekday">Sun</td><tdclass="weekday">Mon</td><tdclass="weekday">Tue</td><tdclass="weekday">Wed</td><tdclass="weekday">Thu</td><tdclass="weekday">Fri</td><tdclass="weekday">Sat</td></tr><tr><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td></tr></table><divclass="droppable">drop in me!</div><divclass="draggable">Drag Me</div>
Solution 2:
It'd be a lot easier if you made the weekday
cells droppable — then you don't have to calculate the index of the current dropped cell and look up the contents of the day-of-the-week cell.
Also, I think you need to give the cells a width and height in the CSS.
This seems to do what you want, courtesy of the jQuery UI docs:
<styletype="text/css">td {
width: 4em;
height: 4em;
margin: 3px;
}
td.weekday {
background: #fcc;
}
td.droppable {
background: #ccf;
}
div.draggable {
background: #cfc;
padding: 1em;
width: 10em;
}
</style><table><tr><tdclass="weekday">Sun</td><tdclass="weekday">Mon</td><tdclass="weekday">Tue</td><tdclass="weekday">Wed</td><tdclass="weekday">Thu</td><tdclass="weekday">Fri</td><tdclass="weekday">Sat</td></tr></table><divclass="draggable">Drag Me</div><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><scripttype="text/javascript">
$(".draggable").draggable();
$(".weekday").droppable({
drop: function() {
alert($(this).text());
}
});
</script>
Sun | Mon |
Post a Comment for "Jquery Drag-drop (getting Element Being Dropped Into)"