http://www.ajaxcf.com/blog/index.cfm tips for constructing next generation AJAX & ColdFusion applications en-us Thu, 09 Sep 2010 03:04:42 -0000 Tue, 17 Apr 2007 17:05:00 -0000 BlogCFC http://blogs.law.harvard.edu/tech/rss joe@ajaxcf.com joe@ajaxcf.com joe@ajaxcf.com no http://www.ajaxcf.com/blog/index.cfm/2007/4/17/Disabling-Text-Selection-For-DragandDrop A common usability problem encountered in Ajax apps is the unintentional selection of text when trying to do a drag-and-drop operation. This javascript function allows you to disable text-selection for a specific element on the page and should work in all modern browsers: <code> <script type="text/javascript"> function disableSelection(element) { element.onselectstart = function() { return false; }; element.unselectable = "on"; element.style.MozUserSelect = "none"; element.style.cursor = "default"; } </script> </code> You can't disable text selection with CSS alone because returning false from the onselectstart event is necessary to disable selection in Internet Explorer. You may want to also change the cursor when mousing over your draggable item with a style of "cursor:default" or "cursor:pointer". Even better yet, you can use "cursor:hand" to indicate that dragging is possible. Here's how you would call it in your page: <code> <script type="text/javascript"> disableSelection(document.getElementById("text")); </script> </code> Should you actually need to copy and paste, you can always view the source. Javascript Tue, 17 Apr 2007 17:05:00 -0000 http://www.ajaxcf.com/blog/index.cfm/2007/4/17/Disabling-Text-Selection-For-DragandDrop