Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder4.news.weretis.net!news.wtal.de!news.tal.de!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail From: "Mel Smith" Newsgroups: comp.lang.javascript Subject: Re: Drag and Drop techniques ?? Date: Wed, 16 May 2012 18:53:40 -0600 Lines: 40 Message-ID: References: <6caf114e-5ef5-4110-8e74-47169074aa4a@d17g2000vbv.googlegroups.com> X-Trace: individual.net RQUFBjTT9YCB1fDymdUTMQT8ymAoEOUGIcZPJ9KSPo9Pmhlpt0kHvBBTzHfN5INP5N Cancel-Lock: sha1:YzB5h/xDWATIc6FKTkZ3ePY6ww0= X-Priority: 3 X-MSMail-Priority: Normal X-Newsreader: Microsoft Outlook Express 6.00.2900.5931 X-RFC2646: Format=Flowed; Original X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.6157 Xref: csiph.com comp.lang.javascript:14023 Scott said: Most of what you need to do is obvious: capture mousedown and mouseup events on the elements you care about (including child elements if there are not specific handles for dragging), capture mousemove events, create some visible state to signal that you can drop the element at a certain location, handle the change from position:static/ relative to position:absolute and back, and adjust the z-index appropriately. Some of the trickier bits might be calculating element position based on mouse position if the draggables are constrained to a part of the page and detecting intersections of elements being dragged and the drag targets. (That last sounds simple enough, and sometimes can be, but it can definitely get tricky.) Another tricky issue that I faced once was that I had drop targets that included some elements not in the document flow (can't remember if that were floated or positioned) and it was really annoying to exclude them when determining if my draggable was over a dropzone; I would suggest you avoid this if at all possible. One nice bit about drag and drop is that there is almost always only one element being dragged at a time (and if not, usually you can define a transparent container element for a collection of them) and only drop target active at a time. This means that you can do most of your work in single objects without worrying about differing states for different draggable objects. There are numerous libraries available. Do look at them, but if you have the skills to write your own, by all means do so. Thanks Scott: I'll dig in and start studying/developing ... -- Mel Smith