I wanted a draggable which would revert when it didn't hit a droppable, and which would "snap" into place as a child of the droppable if it did.
<div class="droprow">
<div class="dropbox" id="drop1"></div>
<div class="dropbox" id="drop2"></div>
<div class="dropbox" id="drop3"></div>
<div class="dropbox" id="drop4"></div>
<div class="dropbox" id="drop5"></div>
</div>
<div class="person" id="kimballben">
<img class="icon" src="img/heart.png" alt="Person" />
Mr. Ben Kimball
</div>
<script type="text/javascript">
//<![CDATA[
new Draggable('kimballben', {
revert: true,
});
document.getElementsByClassName ('dropbox').each ( function (e) {
Droppables.add(e, {
hoverclass: 'over',
onDrop: function (drag, drop) {
drag.revert = false;
drop.appendChild(drag);
drag.style.position = 'absolute';
drag.style.left = drag.style.top = 0;
},
});
});
// ]]>
</script>
This seems to be doing the trick. I'm not sure if the onDrop anonymous
function definition is ideal.
The next thing I'd like to do to enhance this is use the "ghosting" effect; that is, make the draggee a clone, so that the "drag-to-shelf" operation is a copy, not a move.
Still happy to hear ideas or advice if anyone has any. Thanks, Ben -- Ben Kimball <mailto:[EMAIL PROTECTED]> Webmaster <phoneto:512.232.2195> Division of Continuing Education, UT Austin <walkto:SW7,203> _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs@lists.rubyonrails.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
