#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    6
    Rep Power
    0

    How do I disable dragging area of an input field in a div element?


    I have the below code which you can move a div element with an input box, but I don't want the input box to be draggable, I can not select the text in it
    because the input field also gains draggablity.

    How can I exclude the input box to be a draggable area while it is being dragged within a div?

    Code:
    <body>
        <div id="contextMenu" style="background-color: #2390bb; position:fixed; top: 100px; left: 100px; width: 300px; height: 100px; z-index: 999; cursor:move;">
          <input  type="text" style="-webkit-app-region: no-drag" value="Some test" /></div>
    
    </body>
    Code:
    var contextmenu = document.getElementById('contextMenu');
    var initX, initY, mousePressX, mousePressY;
    
    contextmenu.addEventListener('mousedown', function(event) {
    
    	initX = this.offsetLeft;
    	initY = this.offsetTop;
    	mousePressX = event.clientX;
    	mousePressY = event.clientY;
    
    	this.addEventListener('mousemove', repositionElement, false);
    
    	window.addEventListener('mouseup', function() {
    	  contextmenu.removeEventListener('mousemove', repositionElement, false);
    	}, false);
    
    }, false);
    
    function repositionElement(event) {
    	this.style.left = initX + event.clientX - mousePressX + 'px';
    	this.style.top = initY + event.clientY - mousePressY + 'px';
    }
    Here is the fiddle:
    https://codepen.io/whatnext/pen/xLxBeB
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,434
    Rep Power
    9645
    Your mousedown handler can check event.target to see which element triggered the event.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    6
    Rep Power
    0
    Originally Posted by requinix
    Your mousedown handler can check event.target to see which element triggered the event.
    @requinix Thank you for responding. I am a beginner in javascript, I need precise examples.
    I tried to add event remover function when mouse over the input box but I haven't had any success yet.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    6
    Rep Power
    0
    I managed to fix it. I added an `removeEventListener` function which is triggered when the `input box` has focus.

    Code:
    <input onfocus="myFunction()" id="inputBox" data-nodrag="true" type="text" style="-webkit-app-region: no-drag" value="Some test" /></div>
    Code:
    function myFunction(){
    contextmenu.removeEventListener('mousemove', repositionElement, false);
    };
  8. #5
  9. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,434
    Rep Power
    9645
    An easier method would be
    javascript Code:
    contextmenu.addEventListener('mousedown', function(event) {
    	if (event.target != contextmenu) {
    		return;
    	}
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    6
    Rep Power
    0
    Originally Posted by requinix
    An easier method would be
    javascript Code:
    contextmenu.addEventListener('mousedown', function(event) {
    	if (event.target != contextmenu) {
    		return;
    	}
    Awesome! Yours works best. You saved me adding more code to workaround some glitches.
    Thank you!

IMN logo majestic logo threadwatch logo seochat tools logo