Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28464

Re: Move a div with mouse

Show all headers | View raw

danca (Daniele Campagna) wrote:

> I needed to solve an old stupid issue regarding an <iframe> (aka a <div>
> containing an <iframe>) that sometimes is misplaced in a page [served by
> a CGI] containing a form (depending by the size of the browser's
> window), and didn't want to go through calculations involving the size
> of the viewport or adaptive design (for now, in the future maybe...),
> moreover such a functionality seems handy, so I decided to implement a
> "drag 'n drop" function, and began to search around and to try to figure
> out how to do the damn thing.
> 
> After many hours searching, studying, testing and tinkering with Firefox
> and IE I ended up with this function:

First of all, your code (style) is barely readable.  If you want others to 
review your code, you should employ a code style that is easily readable.
A decent code editor can help with that.

Particularly for Usenet, you should post code that still works when word-
wrapped at about the 72th text column.  See the FAQ.

> // usage: makeMovable(<id of the div to drag>,<optional id of a
> "handler" (f.e. a small image inside the div) to drag the div>)

This code was word-wrapped by your newsreader and does not work anymore 
because of that.  It would not have happened had you used /*… */ instead, 
which I recommend for documentation comments.
 
> var makeMovable = function(target, handle) {
>   target = document.getElementById(target);
>   if (!handle) handle = target; else
>   handle=document.getElementById(handle); if (document.addEventListener){
>  
> handle.addEventListener("mousedown",function(event){e=event||
window.event;if
> (e.preventDefault) e.preventDefault(); else e.returnValue = false;})

Wrong.  You are testing “document.addEventListener”, but you are calling 
“handle.addEventListener” – a different method.  Test exactly that which you 
will be using, and test for callable objects to be callable, not merely 
existing.  In particular, do not subject methods of host objects to simple 
type-converting tests; this is error-prone (search for “isHostMethod”).

>   }else{
>  
> handle.attachEvent("onmousedown",function(event){e=event||window.event;if
> (e.preventDefault) e.preventDefault(); else e.returnValue = false; })
>   }
>   handle.onmousedown = function(event) {

It makes no sense to use one of EventTarget::addEVentListener() from the W3C 
DOM and eventTarget.attachEvent() from the MSHTML DOM, *and* subsequently 
EventTarget::onmousedown from the Netscape/HTML5 DOM.  See my tests about 
the side effects of using both from earlier this year, and 
jsx.dom.addEventListener() for the correct approach.

> […]
>    }else{ alert("no event")// just in case}

This may be a syntax error.  Your code is so unreadable that it is difficult 
to tell without copying and reformatting it.

>    document.onmouseup = function() {
>     document.onmousemove = null;
>     document.onmouseup = null;
>    }

Nonsense.

> […]
> So, JFC,

You want to refrain from cursing when asking a question.

See also <http://www.catb.org/~esr/faqs/smart-questions.html>.

> why this does not work with those 2 browsers?

You are still under the misconception that it would be prudent to think in 
terms of browsers instead of DOM implementations.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-21 13:26 +0200
  Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-24 20:36 +0200
    Re: Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-24 21:58 +0200
      Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-25 14:07 +0200
        Re: Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-25 19:47 +0200
          Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-25 20:54 +0200
            Re: Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-26 12:54 +0200
              Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-26 13:36 +0200

csiph-web