# Which element has mouse down ? **URL:** \ **Category:** Uncategorized\ **Created:** [August 11, 2019, 1:18am UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168 "2019-08-11T01:18:52Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 11, 2019, 1:18am UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168/1 "2019-08-11T01:18:52Z")

Hello & Thanks, In the code below I am getting this error: Uncaught TypeError: Cannot read property ‘addEventListener’ of null at Draggable-Element-w3Schools-Ex.html:56 for this statement: ```auto var container = document.querySelector("mydiv"); ``` I want to Drag “mydiv” by mousedown on “mydivheader” ‘div’ . Also , I need to keep this same structure as class=“mydiv” , (no containers etc.) else I will loose the ability to stretch/shrink textarea . Plz, what do I need to do , so that ’ function dragStart(e) ’ knows which ‘mydiv’ needs to be Dragged . Thanks ```auto

Draggable-Element-Ex-Kirupa.html

Click and hold the mouse button down while moving the DIV element

mydivheader

showMe

``` ---

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [August 11, 2019, 4:19pm UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168/2 "2019-08-11T16:19:39Z")

`querySelector` uses selectors to find elements. The selector your using is searching for elements with the tag name “mydiv”, which would be something like `` > [@vmars316](#): > > var container = document.querySelector(“mydiv”); But what you’re looking for is the element with the _class_ named “mydiv”. For that you need a class selector with the dot (`.`). ``` var container = document.querySelector(".mydiv"); ``` ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 11, 2019, 8:18pm UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168/3 "2019-08-11T20:18:50Z")

Thanks senocular; Now that it is working , it shows a new problem: When I click on and Drag ‘mydivheader’ , ‘mydivheader’ separtes from the rest of ‘mydiv’ . How can I move the whole structure and keep the properties/attributes that it now has ? Namely the property of resizing the whole structure . ```auto

Draggable-Element-Ex-Kirupa.html

Click and hold the mouse button down while moving the DIV element

mydivheader

showMe

Thanks ``` ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 11, 2019, 9:03pm UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168/4 "2019-08-11T21:03:03Z")

When you drag an element, its children will automatically move with it. In your case, **myDiv** is the parent that contains both your **mydivheader** and your `textarea`. Dragging **mydivheader** will not drag the sibling `textarea` as well. You can either drag **myDiv** itself or put the `textarea` inside your **mydivheader** 🙂 ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 11, 2019, 10:57pm UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168/5 "2019-08-11T22:57:30Z")

Thanks Kirupa; Two problems with that code: 1. This moves mydivheader &/or textarea . But not the whole structure. 2. And it only works for the 1st mydiv. Run here: [https://www.w3schools.com/code/tryit.asp?filename=G6WI3XM07RUR](https://www.w3schools.com/code/tryit.asp?filename=G6WI3XM07RUR) This code Drags the whole structure , but only works for 1 #mydiv . Run here: [https://www.w3schools.com/code/tryit.asp?filename=G6WI7JDERGM8 w3Schools-EX](https://www.w3schools.com/code/tryit.asp?filename=G6WI7JDERGM8) Problem with this one is I can’t figure how to run it with multiple '#mydiv ’ s . Thanks for your help . Btw: these two examples would make a great TUTORIAL . Once I get them both going , I plan to do just that . ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 14, 2019, 11:02pm UTC](https://forum.kirupa.com/t/which-element-has-mouse-down/640168/6 "2019-08-14T23:02:18Z")

Kirupa : In the code below I put a 12px border around myDiv , and put textarea inside of myDivHeader , hoping to drag myDiv by border . But results are the same can still drag textarea and still can drag myDivHeader BUT not myDiv . Also , with textarea inside of myDivHeader I can no longer resize textarea . Like I can here : [[https://www.w3schools.com/code/tryit.asp?filename=G6WI7JDERGM8](https://www.w3schools.com/code/tryit.asp?filename=G6WI7JDERGM8)] Textarea inside of myDivHeader code here: ([https://www.w3schools.com/code/tryit.asp?filename=G6WI7JDERGM8](https://www.w3schools.com/code/tryit.asp?filename=G6WI7JDERGM8)) See here [https://www.w3schools.com/code/tryit.asp?filename=G6ZZGJE3FZPJ](https://www.w3schools.com/code/tryit.asp?filename=G6ZZGJE3FZPJ) Thanks for your help!