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:
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
<!DOCTYPE html>
<html>
<style>
.mydiv {
display: inline-block;
position: flex;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
.mydivheader {
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
.mydivheader:active {
opacity: .25;
}
.mydivheader:hover {
cursor: pointer;
background-color: black;
}
</style>
<body>
<h5>Draggable-Element-Ex-Kirupa.html</h5>
<p>Click and hold the mouse button down while moving the DIV element</p>
<div class="mydiv">
<div class="mydivheader" onclick="whoIsActive()">mydivheader</div>
<textarea rows="4" cols="20"> </textarea>
</div>
<br>
<div class="mydiv">
<div class="mydivheader">mydivheader</div>
<textarea rows="4" cols="20"> </textarea>
</div>
<br><br><br><br><br>
<p id="showMe" style="border-style: solid;">showMe</p>
<script>
function whoIsActive(){
}
</script>
<script>
//Make the DIV element draggagle:
var classCount = 0;
var container = document.querySelector("mydiv");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
//classCount = dragElement(document.getElementByClassName("mydiv"));
//document.getElementById("showLength").innerHTML = classCount.length;
// what does e.* look like ?
document.getElementById("showMe").innerHTML = e;
if (e.target !== e.currentTarget) {
active = true;
// this is the item we are interacting with
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>
querySelector uses selectors to find elements. The selector your using is searching for elements with the tag name “mydiv”, which would be something like <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 (.).
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 .
<!DOCTYPE html>
<html>
<style>
.mydiv {
display: inline-block;
position: flex;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
.mydivheader {
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
.mydivheader:active {
opacity: .25;
}
.mydivheader:hover {
cursor: pointer;
background-color: black;
}
</style>
<body>
<h5>Draggable-Element-Ex-Kirupa.html</h5>
<p>Click and hold the mouse button down while moving the DIV element</p>
<div class="mydiv">
<div class="mydivheader" onclick="whoIsActive()">mydivheader</div>
<textarea rows="4" cols="20"> </textarea>
</div>
<br>
<div class="mydiv">
<div class="mydivheader">mydivheader</div>
<textarea rows="4" cols="20"> </textarea>
</div>
<br><br><br><br><br>
<p id="showMe" style="border-style: solid;">showMe</p>
<script>
function whoIsActive(){
}
</script>
<script>
//Make the DIV element draggagle:
var classCount = 0;
var container = document.querySelector(".mydiv");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
//classCount = dragElement(document.getElementByClassName("mydiv"));
//document.getElementById("showLength").innerHTML = classCount.length;
// what does e.* look like ?
document.getElementById("showMe").innerHTML = e;
if (e.target !== e.currentTarget) {
active = true;
// this is the item we are interacting with
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>
Thanks
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
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
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 .
