Here's draggable.js:
/*
Drag: A Really Simple Drag Handler
*/
Drag = {
_move: null,
_down: null,
start: function(e) {
e.stop();
// We need to remember what we're dragging.
Drag._target = e.target();
/*
There's no cross-browser way to get offsetX and offsetY,
so we
have to do it ourselves. For performance, we do this once
and
cache it.
*/
Drag._offset = Drag._diff(
e.mouse().page,
getElementPosition(Drag._target));
Drag._move = connect(document, 'onmousemove', Drag._drag);
Drag._down = connect(document, 'onmouseup', Drag._stop);
},
_offset: null,
_target: null,
_diff: function(lhs, rhs) {
return new MochiKit.Style.Coordinates(lhs.x - rhs.x, lhs.y -
rhs.y);
},
_drag: function(e) {
e.stop();
setElementPosition(
Drag._target,
Drag._diff(e.mouse().page, Drag._offset));
},
_stop: function(e) {
disconnect(Drag._move);
disconnect(Drag._down);
}
};
connect(window, 'onload',
function() {
/*
Find all DIVs tagged with the draggable class, and connect
them to
the Drag handler.
*/
var d = getElementsByTagAndClassName('DIV', 'draggable');
forEach(d,
function(elem) {
connect(elem, 'onmousedown', Drag.start);
});
});
connect(window, 'onload',
function() {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "draggable/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page +
href;
}
});
On Feb 22, 7:29 pm, "Matthew Kwiecien" <[EMAIL PROTECTED]> wrote:
> Unless I'm mis-remembering, you need to include DragAndDrop.js as it's not
> loaded by default.
>
> I'd need to see what's in draggable.js to say anything more.
>
> On 2/22/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
>
>
>
>
> > I've been using the draggable demo .js on the site to try get a div on
> > a web site I'm working on to be draggable. So far I'm not having any
> > luck and I don't really know why.
>
> > Here's the html:
>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
> > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> > <head>
> > <title>Test</title>
> > <link rel='stylesheet' type='text/css'
> > href='style.css' />
> > <script type='text/javascript'src='MochiKit.js'></script>
> > <script type='text/javascript'src='draggable.js'></script>
> > </head>
> > <body>
> > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eget
> > nunc. In hac habitasse platea dictumst. Vivamus quis quam. In ut
> > ligula in lectus mattis volutpat. Sed tempus consectetuer dui. Integer
> > ipsum. Aenean quis risus eu nunc feugiat malesuada. Praesent posuere
> > volutpat mi. Curabitur ligula neque, faucibus ut, mattis non, egestas
> > ut, quam. Sed arcu. Lorem ipsum dolor sit amet, consectetuer
> > adipiscing elit. Etiam volutpat, ante ut gravida tristique, sem velit
> > tempor augue, ut tempor massa velit eget nisl. Donec vitae nisl. In
> > vel turpis. Nulla tempor.</p>
> > <p>Ut vulputate, ligula quis dictum fringilla, massa risus ullamcorper
> > libero, at viverra justo libero vel massa. Mauris fringilla justo quis
> > erat. Suspendisse auctor. Suspendisse odio erat, venenatis vitae,
> > rutrum a, convallis at, pede. Cras tristique hendrerit leo. In
> > porttitor egestas nunc. Integer varius vulputate nisi. Duis diam
> > purus, iaculis ut, mollis egestas, aliquet at, odio. Mauris neque
> > libero, gravida sed, auctor a, faucibus nec, neque. Suspendisse
> > ultricies. Suspendisse potenti. Praesent malesuada aliquam pede. Nam
> > venenatis scelerisque lorem. Aliquam erat volutpat. Quisque faucibus
> > erat vel mauris. Aliquam erat volutpat. Morbi tincidunt aliquam ante.
> > Mauris semper, ante vel ullamcorper fermentum, eros mauris fringilla
> > magna, ut interdum enim enim dapibus turpis.</p>
>
> > <div id="Wcont" class="draggable"><div id="whead">This</br> through
> > Flickr </div><div id="wgallery"><div class="cell" align="center"><a
> > href="http://www.flickr.com/photos/[EMAIL PROTECTED]/258563293"><img
> > src="http://static.flickr.com/112/258563293_a672fff083_m.jpg"/></a></
> > div><div class="cell" align="center"><a href="http://www.flickr.com/
> > photos/[EMAIL PROTECTED]/215824196"><img src="http://static.flickr.com/
> > 79/215824196_3dfca1ebf3_m.jpg"/></a></div></div><div id="wfoot"></
> > div></div>
>
> > <p>Nullam scelerisque, turpis eu interdum molestie, nulla velit auctor
> > ligula, vitae nonummy justo nibh at quam. Quisque ultrices faucibus
> > est. Nulla facilisi. Pellentesque scelerisque turpis ut tortor. Fusce
> > adipiscing mollis tortor. Praesent fermentum libero commodo mauris.
> > Maecenas suscipit nonummy dolor. Suspendisse eget lorem. Duis tempus,
> > ante in pulvinar dapibus, nibh mauris placerat tellus, eu euismod
> > dolor mi sit amet enim. Aenean iaculis suscipit dolor. Ut varius, urna
> > at imperdiet dapibus, nibh ligula sagittis turpis, vitae aliquam pede
> > purus id ante. Donec nec enim. Vestibulum tempus tortor nec dui
> > feugiat faucibus.</p>
> > <p>Nulla facilisi. Aliquam leo ante, dictum adipiscing, vestibulum
> > quis, aliquet eu, neque. Phasellus cursus, dolor id sagittis
> > ultricies, metus metus varius arcu, ac auctor quam nunc et diam. Nulla
> > mollis, sem ac adipiscing consequat, nisl turpis adipiscing leo, non
> > venenatis mi justo ac lorem. Fusce justo mi, mattis eget, vestibulum
> > non, porttitor sagittis, ligula. Integer scelerisque interdum nibh.
> > Nunc dignissim enim quis ipsum. Phasellus lorem lectus, porta eu,
> > congue at, vulputate vitae, magna. Phasellus eu odio. Integer diam
> > metus, blandit eget, pellentesque sed, hendrerit nec, enim.
> > Pellentesque mauris est, rutrum non, placerat id, ultrices at, justo.
> > Donec cursus, tellus eu posuere dictum, tellus lacus feugiat est, ac
> > auctor nunc dui eu erat. Curabitur nec massa ac lorem pulvinar
> > ultricies.
> > </p>
> > <p>Pellentesque vel massa sit amet est varius ullamcorper. Quisque
> > laoreet tempus elit. Donec pellentesque pede. Phasellus luctus. Sed
> > blandit sagittis neque. Aliquam scelerisque. Vestibulum ante ipsum
> > primis in faucibus orci luctus et ultrices posuere cubilia Curae;
> > Proin fermentum purus quis enim. Duis adipiscing arcu id nisl. Nam
> > tortor mi, elementum sed, cursus in, auctor sit amet, mi. Aliquam
> > porta, eros quis blandit suscipit, metus leo condimentum nulla, et
> > tristique augue nulla ut massa. Praesent ultrices rhoncus nibh. In
> > dolor purus, sodales non, tincidunt vitae, dapibus quis, felis.
> > Praesent blandit, lorem nec dictum imperdiet, est nisl fringilla dui,
> > nec pulvinar elit augue a velit.</p>
>
> > </body>
> > </html>
>
> > Here's the CSS:
>
> > #Wcont{float:right;
> > margin-left: 5px;
> > }
>
> > #whead{
> > background-color:#2B4B86;
> > width:170px;
> > max-width:170px;
> > height:40px;
> > text-align:center;
> > color:white;
> > padding-top: 5px;
> > padding-bottom: 5px;
> > }
>
> > #wfoot{
> > width:170px;
> > height:1px;
> > background-color: #2B4B86;
> > }
>
> > #wgallery {width:170px;
> > height: 200px;
> > background-color:#E2E9F3;
> > padding-bottom:5px;
> > padding-top:10px;
> > background-image: url(/images/wbox.jpg);
>
> > }
>
> > img { height:100px;
> > border-style:none;
> > }
>
> > .cell {margin-top: 5px;
> > margin-left:2%;
> > margin-right:2%;
> > height: 90px;
> > overflow:hidden;
> > }
>
> > .draggable {
> > cursor: move;
> > }
>
> --
>
> | Matthew Kwiecien
> ยท Webhosting | Design
> | delihosting.com | neoteria.com
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
![http://static.flickr.com/112/258563293_a672fff083_m.jpg"/](http://static.flickr.com/112/258563293_a672fff083_m.jpg"/){kind=link}