CODEWITHSUNDEEP
javascriptjqueryhtmlfirefoxdrag
Richard H
Richard H

Reputation: 39055

Draggable div: behaves like an image on second drag

I have a draggable div in my page. On the first drag it works perfectly. On the second drag it starts to work but then the div seems to be "captured" as if it were an image - the dragging stops, a "copy" of the div appears and the mouseup event is not registered. Identical to this guys problem if i haven't been clear enough: http://www.webdeveloper.com/forum/showthread.php?t=227602

Any idea what might be causing this and how to overcome?

Thanks

Edit: Ok I have found the answer, thanks to this question. To save future visitors a click, in your dragStart function makes sure you end with event.preventDefault():

// bind dragStart handler to appropriate element:
<script type="text/javascript">
  $("#handle").bind("mousedown", function(e) { dragStart(e) });
</script>

function dragStart(event) {

 // bind mousemove and mouseup handlers to $(document), 
 // get ininitial positions etc

 ...

 // then do this:

 event.preventDefault();

}

and hey presto all is good.

Upvotes: 1

Views: 197

Answers (1)

Jason
Jason

Reputation: 3485

@RichardH: also, consider the following in CSS:

#handle {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

This will disable that accidental selection of the element when dragging.

Upvotes: 2

Related Questions