I have an issue with my drag and drop script and I can't seem to
figure out what's going on. The code below is complete enough to show
the problem. The issue is that when I drop an item onto a dropable
element, the item comes flying from off the page to eventually land on
the dropable element. I've been over the docs and googled the problem
but can't seem to find exactly what I'm looking for. I've also tried
hacking it so the element hides itself after the mouse-up and then
shows itself after it "lands" but to no avail.
Any help would be greatly appreciated.
<html>
<head>
<title></title>
<style type="text/css">
.draggable {
color: #000000;
cursor: move;
position: relative;
display: inline;
}
.empty {
background: #eeeeee;
color: #000000;
}
.filled {
background: #ffffff;
color: #000000;
}
</style>
<script type="text/javascript" charset="utf-8" src="mochikit/
MochiKit.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Async.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Base.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Iter.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/DOM.js"></
script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Color.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Visual.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Effect.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Position.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Signal.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
DragAndDrop.js"></script>
<script type="text/javascript" charset="utf-8" src="mochikit/
Sortable.js"></script>
<script type="text/javascript">
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
function guid() {
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
};
var draggable_objects = new Array();
var droppable_objects = new Array();
function createDraggableById(element_id) {
return new MochiKit.DragAndDrop.Draggable(element_id,
{
revert: true,
handle: false,
starteffect: MochiKit.Visual.Opacity,
endeffect: MochiKit.Visual.Opacity,
zindex: 1000,
setclass: null,
ghosting: null,
onchange: MochiKit.Base.noop,
scroll: false,
scrollSensitivity: 20,
scrollSpeed: 15
});
};
function dropFunction(element, onto) {
if(onto.parentNode.className=="filled") return false;
p = element.parentNode;
onto.parentNode.className="filled";
p.parentNode.className="empty";
onto.appendChild(element);
return true;
};
function makeDraggables() {
var draggable_class_elements = getElementsByTagAndClassName('*',
'draggable');
for(element in draggable_class_elements) {
draggable_class_elements[element].id = guid();
draggable_objects[draggable_class_elements[element].id] =
createDraggableById(draggable_class_elements[element].id);
}
};
function makeDroppables() {
var droppable_class_elements = getElementsByTagAndClassName('*',
'droppable');
for(element in droppable_class_elements) {
droppable_class_elements[element].id = guid();
droppable_objects[droppable_class_elements[element].id] = new
MochiKit.DragAndDrop.Droppable(droppable_class_elements[element].id,
{ greedy: true, ondrop: dropFunction } );
}
};
function init_matchups_drag_and_drop() {
makeDraggables();
makeDroppables();
};
</script>
</head>
<body onload="init_matchups_drag_and_drop();">
<h1>Drag & Drop For Schedule Prototype</h1>
<table>
<tr>
<td>
<table border="1">
<tr>
<td class="empty" style="width:150px;">
<div class="droppable"> </div>
</td>
<td>vs.</td>
<td class="empty" style="width:150px;">
<div class="droppable"> </div>
</td>
</tr>
</table>
</td>
<td>
<ul>
<li id="blah1" class="filled" style="width:150px;">
<div class="droppable">
<div class="draggable"><span>Team A</span><input
type="hidden" value="1" name="team[]" /></div>
</div>
</li>
<li id="blah2" class="filled" style="width:150px;">
<div class="droppable">
<div class="draggable"><span>Team B</span><input
type="hidden" value="2" name="team[]" /></div>
</div>
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
