drop in a dragable conatiner
Hi!
i have two div's that is drag'n'drop with
http://plugins.jquery.com/node/7041
script for easy drag and drop.
In div #1 i have a list of items that also is dragable and a list that is droppable in div #2
The problem is that if i move div #2 (also movable), the Jquery-code does not "know" that it moved and the droppable list is visualy in the right place but jquery thinks its in the upper left corner (where the start-place is), so i cant drop in the box.
Making both divs movable
-
$(function() {
$("div").dropShadow();
$("div h3").bind('drag', function(event) {
$(this).parent().css({
top: event.offsetY,
left: event.offsetX
});
$(this).parent().removeShadow();
$(this).parent().dropShadow();
});
});
Code for fixing drag'n'drop in my lists.
-
function MoveableUtility() {
$("div[title='module.LeassonBox'] ul li")
.bind("dragstart", function(event) {
return $(this).clone().addClass("drag").appendTo(document.body);
})
.bind("drag", function(event) {
$(event.dragProxy).css({
left: event.offsetX,
top: event.offsetY
});
})
.bind("dragend", function(event) {
$(event.dragProxy).remove();
});
$("div[title='module.Schedule'] td")
.bind("dropstart", function(event) {
if (this == event.dragTarget.parentNode) return false;
$(this).addClass("active");
index = $('td').index($(this));
for (a = 0; a < 4; a++)
$("td:eq(" + (index + a) + ")").addClass("active");
})
.bind("drop", function(event) {
$(this).children("ul").append("<li><div class\"drag\">" + event.dragTarget.innerHTML + "</div></li>");
index = $('td').index($(this));
})
.bind("dropend", function(event) {
index = $('td').index($(this));
for (a = 0; a < 4; a++)
$("td:eq(" + (index + a) + ")").removeClass("active");
});
}
My static html-code.
-
<div title="module.LeassonBox">
<h3>Lektioner</h3>
<ul class="drag">
<li title="60">3 minibu...</li>
<li title="75">6 skidle...............</li>
</ul>
</div>
<div title="module.Schedule">
<h3>Schema</h3>
<table cellpadding="0" cellspacing="0">
</table>
</div>
Building td's with droppable lists inside each td dynamicly
-
function BuildBaseTable()
{
$.getJSON("/Schedule/GetTeachersList", null, function(data) {
$.each(data, function(index, optionData) {
$("table").append("<tr><td class=\"nodrop\">" + optionData.Name + "</td></tr>");
});
for (a = 0; a < 60; a++) {
$("tr").append("<td><ul></ul></td>");
}
$("table").parent().removeShadow();
$("table").parent().dropShadow();
MoveableUtility(); //Setting drag'n'drop on inner lists
});
}