How to Cancel Drag and Drop operation?

vmars316 · November 9, 2022, 9:17pm

As always , Thanks for your Help…
This is the ‘watch it run’ page :
https://vmars.us/Guitar/Guitar-1-Circle-Gray-Move-OnClick-Image.html

I am trying to make " img id=“image01” not-draggable .
Unfortunately in trying to do that , I also make ‘circle 1’ not-draggable .
I am trying to cancel the ‘drag’ in the js .
I mark all 7 of my changes with a “//vm” to make them easy to find .
Here is my code :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>https://vmars.us/Guitar/Guitar-1-Circle-Gray-Move-OnClick-Image.html 
          
</title>
<style>

body {
      margin: 20px;
    }
    #container {
      width: 100%;
      height: 450px;
      background-color: #DCDCDC;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
      counter-reset: itemCount;
    }

    .item {
	  display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
      background-color: #F5F5F5;  //  whitesmoke 
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
    font-size:28px;
    }

#p1 {
    position: absolute;
    left: 50px;
  width: 90%;
  border-style: solid;
}
    .item:active {
      opacity: .75;
    }

    .item:hover {
      cursor: pointer;
    }
    
    h1 {
      margin-bottom: 10px;
    }
  </style>

<script>

</script>

</head>
<body>
<!--    -->
<div id="outerContainer">
<div id="container">
<div style="  position: absolute; right: 200; top: 50px;  text-align: center; display: inline; ">
  <div class="item" class="one"       >1</div>
</div>
<br>
<div id="img1Div"; style="width: 100%;" >
<br>
<!-- <table   style="text-align: center; width: 100%;" border="1" cellpadding="2" cellspacing="2">  -->
<p id="p2"; style="width: 100%;" >
<img id="image01"  src="Fretboard-Table-Image-624x114.png" alt="Fretboard-Table-Image-624x114.png" width: 600px; height: 400px;>
</p>
</div>
</div>  <!--  id="container"  -->
<br>
<div>
<p  contenteditable ="true"  id="p1" style="  height: 100px; position: absolute; display: block;  
       position: absolute;  bottom: 10px;" >Notes: 
</p>
</div>
</div>  <!--  id="outerContainer  -->

<script>
    var container = document.querySelector("#container");
    var activeItem = null;
	var activeItemKeep = 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) {

      if (e.target !== e.currentTarget) {
        active = true;

        // this is the item we are interacting with
		// check if item is HTMLImageElement  //vm 
		
        activeItem = e.target;
		activeItemKeep = activeItem;
		console.log(activeItem); //vm
//		alert(activeItem); //vm
		if (activeItemKeep = "HTMLImageElement") {return; } //vm

        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("Dragging something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }

    function dragEnd(e) {
      if (activeItemKeep = "HTMLImageElement") {return; } //vm
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }

      active = false;
      activeItem = null;
    }

    function drag(e) {
      if (activeItemKeep = "HTMLImageElement") {return; } //vm
      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) {
      if (activeItemKeep = "HTMLImageElement") {return; } //vm
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>


</body>
</html>

m_hutley · November 10, 2022, 11:33am

= vs ==

(Also activeItemKeep is not a string at that point, so this should never return true.)

What you should be doing… well, there’s a lot to unpack here, but from what I can see, the easiest way to handle this would be to check if activeItem is the thing you want to not move (activeItem.id == “image01”). If it’s the image, set activeItem to null, set active to false, and return.

DaveMaxwell · November 10, 2022, 1:05pm

Just like in the last thread, your dragstart are not in the right place. They should not be on the container because that (seemingly) makes ALL items within the container object draggable.

You should only be marking items as draggable if you actually want to move them. The easy/peasy way to do that would be to add a class to the items you want to drag/drop, and loop through those items to add the appropriate event listeners.

vmars316 · November 10, 2022, 4:07pm

Thanks [m_hutley] ,
Is this what you mean ?:

        var container = document.querySelector("#container");
        var activeItem = null;
    //	var activeItemKeep = null; //vm
    
        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) {
    
          if (e.target !== e.currentTarget) {
            active = true;
    
            // this is the item we are interacting with
    		
            activeItem = e.target;
    //		activeItemKeep = activeItem; //vm
    		console.log(activeItem); //vm
    //		alert(activeItem); //vm
    //		 If it’s the image, set activeItem to null, set active to false, and return. //vm
    		if (activeItem.id == “image01”) {
    		    activeItem = null;
    			activeItem = false;
                return; } ; //vm
    
            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("Dragging something!");
                activeItem.initialX = e.clientX - activeItem.xOffset;
                activeItem.initialY = e.clientY - activeItem.yOffset;
              }
            }
          }
        }
    
        function dragEnd(e) {
    		if (activeItem.id == “image01”) {
    		    activeItem = null;
    			activeItem = false;
                return; } ; //vm
          if (activeItem !== null) {
            activeItem.initialX = activeItem.currentX;
            activeItem.initialY = activeItem.currentY;
          }
    
          active = false;
          activeItem = null;
        }
    
        function drag(e) {
    		if (activeItem.id == “image01”) {
    		    activeItem = null;
    			activeItem = false;
                return; } ; //vm
          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) {
    		if (activeItem.id == “image01”) {
    		    activeItem = null;
    			activeItem = false;
                return; } ; //vm
          el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }

Sorry to say:
< div class=“item” class=“one” >1 < div > is still not-draggable .
#image01 is not-draggable as expected ,

Did I code it wrong ?

vmars316 · November 10, 2022, 4:31pm

Thanks Dave ,
I understand what you mean by not in the right place ,
but “Fretboard-Table-Image-1248x228.png” needs to be positioned there ?
https://vmars.us/Guitar/Guitar-1-Circle-Gray-Move-OnClick-Image.html
Are Layers an option ?
Also I don’t see what you mean loop through those items to add the appropriate event listeners.

vmars316 · November 10, 2022, 4:46pm

https://jsfiddle.net/vmars316/79L5xn8s/10/

DaveMaxwell · November 10, 2022, 7:43pm

Your event listeners should not be on the container object. They should be on the things you actually want to drag and drop. I’m guessing the circles? If so, it should be something more like


items = document.querySelectorAll('.item');
items.forEach((item) => {
        item.addEventListener("touchstart", dragStart, false);
        item.addEventListener("touchend", dragEnd, false);
        item.addEventListener("touchmove", drag, false);
    
        item.addEventListener("mousedown", dragStart, false);
        item.addEventListener("mouseup", dragEnd, false);
        item.addEventListener("mousemove", drag, false);
});

This prevents you from having to “escape” items you don’t want to drag/drop…

vmars316 · November 11, 2022, 1:52am

Hey Dave ,
Thanks for the Code , its another one for my Study-This Folder .
Thought I understood what you meant by not in the right place ,
But after much re-thinking , I realize what you were saying .
So I went back and redesigned my page structure .
I tried it earlier but kept getting hungup on style vs css code .
Anyways , here’s the result :
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html

Thanks for sticking with me

system · February 10, 2023, 8:52am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.