www.webdeveloper.com
Results 1 to 5 of 5

Thread: Disable the "text-select cursor"

  1. #1
    Join Date
    Apr 2013
    Posts
    7

    Question Disable the "text-select cursor"

    Hey guys,

    I've developed a script, which allowes the user to move a div element.
    But if I'm moving it (while holding the left mouse), my browser (Chrome) starts to select the whole page.
    Its very annoying...
    Is there any way to disable the select event on the whole page?
    But there's another problem too:
    If I'm moving it, my cursor's changing itself the text-select cursor, but I want that the cursor's changing itself to the "move-cursor"

    So, is there any way to disable both things?
    Mfg, deSpeach

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    if you post the code somebody could perform some tests with it to help you. otherwise:

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Disable Text Selection script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    function disableSelection(target){
    if (typeof target.onselectstart!="undefined") //For IE 
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
        target.style.MozUserSelect="none"
    else //All other route (For Opera)
        target.onmousedown=function(){return false}
    target.style.cursor = "default"
    }
    
    window.onload=function(){disableSelection(document.body);}
     </script>
    </head>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    The proposed solution will not work in opera if your use the mousedown function !
    Use something like this for drag and drop
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <title>Drag & Drop</title>
    <style type="text/css">
    body {margin:0;font-family:Georgia;background-color:#ccc;}
    *{color:#003;}
    #pge {display:block;position:relative;width:800px;margin:10px auto;padding:10px;background-color:#fff;}
    p {display:block;width:400px;margin:0;padding:0;}
    p:first-letter {padding-left:50px;}
    img,b {display:block;margin:20px;}
    
    .drag {position:relative;cursor:pointer;}
    </style>
    <script type="text/javascript">
    var dragobject={
    	ox:null, oy:null, trgObj:null, okDrg:0,sx:0, sy:0,
    	initialize:function(){
    		document.onmousedown=this.drag
    		document.onmouseup=function(){this.okDrg=0;
    // To display the position
    //alert('Position: left: '+this.trgObj.offsetLeft+', top: '+this.trgObj.offsetTop)
    		}}
    	,drag:function(e){
    		var evtobj=window.event? window.event:e
    		this.trgObj=window.event? event.srcElement:e.target
    		if (this.trgObj.className=="drag"){
    			this.okDrg=1
    			if (isNaN(parseInt(this.trgObj.style.left))){this.trgObj.style.left=0}
    			if (isNaN(parseInt(this.trgObj.style.top))){this.trgObj.style.top=0}
    			this.ox=parseInt(this.trgObj.style.left)
    			this.oy=parseInt(this.trgObj.style.top)
    			this.sx=evtobj.clientX
    			this.sy=evtobj.clientY
    			if (evtobj.preventDefault) evtobj.preventDefault()
    			document.onmousemove=dragobject.moveit}}
    	,moveit:function(e){
    		var evtobj=window.event? window.event:e
    		if (this.okDrg==1){
    			this.trgObj.style.left=this.ox+evtobj.clientX-this.sx+"px"
    			this.trgObj.style.top=this.oy+evtobj.clientY-this.sy+"px"
    		return false}}
    }
    dragobject.initialize()
    </script>
    </head>
    <body>
    <div id="pge">  
    	<img src="images/avatar_defaut.png" border=0 class=drag>
    	<p class=drag>Lorem ipsum dolor sit amet consectetuer urna magna urna tortor habitant. Morbi volutpat Curabitur ligula a vitae Donec.
    		<br>Nisl consectetuer a sodales sociis risus tincidunt vitae magna cursus laoreet.
    	</p>  
    	<p class=drag>Lorem ipsum dolor sit amet consectetuer Nam libero mauris suscipit hendrerit. Sollicitudin vel Pellentesque. Scelerisque semper cursus tortor eget porttitor sed urna sed justo Aenean. Consequat.
    	</p>
    	<b class=drag>All is moving on this world !</b>
    </div>
    </body>
    </html>
    It's not a good idea to not allow the text-select cursor. A good drag-and-drop must operate without like on this Draughts game

    To change the cursor use domElement.style.cursor='move' or see this w3scholls.com page
    Last edited by 007Julien; 04-27-2013 at 11:25 AM.

  4. #4
    Join Date
    Apr 2013
    Posts
    7
    I know how to change the cursor, but every time I move the cursor it's just changing back to the "text-select cursor", because my browser think's that I want to select a text.
    This is the code:
    Code:
    setInterval(function() {
                        $("div.window").mousedown(function(e) {
                            click = $(this);
                            $(click).css("cursor", "move");
                            x = e.pageX - this.offsetLeft;
                            y = e.pageY - this.offsetTop;
                        });
                        $(document).mouseup(function() {
                            $(click).css("cursor", "auto");
                            click = false;
                        });
                        $(document).mousemove(function(e) {
                            if(click !== false) {
                                if(e.clientX <= 10) {
                                    shortcut.new_shortcut($(click));
                                }
                                else {
                                    $(click).css("top", e.clientY - y + $(document).scrollTop());
                                    $(click).css("left", e.clientX - x);
                                }
                            }
                        });
    Btw. I need to use an interval, because the user can choose, how many elements he/she want's to create.

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    its done in css, -webkit-user-select: none; for one...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles