How to stop Draggable from happening?

Hello & TIA :
vanilla javascript
I have a <p> that insists on being draggable .
How to stop Draggable from happening ?

p contenteditable =“true” class=“p1” style=" border-color: green; position: absolute; height: 100px; bottom: 0px; display: block; " >Notes:

The element just before it is a <table> , but it is not draggable .
The elements that ‘are draggable’ are at the very top of page .
Namely a bunch of these:

div class=“item” class=“one” style=" position: absolute; left: 0px; top: 0; background-color: #F50000;" >1
You can view page here: https://vmars.us/Guitar/Guitar-7x2-Circles-DragDrop-1-Row-Table.html
Once there , Try dragdrop circles , and try dragdrop ‘Notes area’ , it shouldn’t be draggable .

Also code is here:





https://vmars.us/Guitar/Guitar-7x2-Circles-DragDrop-1-Row-Table.html
file:///C:/drag-and-drop-ducks-master/Guitar-7x2-Circles-DragDrop-1-Row-Table.html

body {
      margin: 20px;
    }
    #container {
      width: 100%;
      height: 500px;
      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;
    top: 390px;
//bottom: 0px;
    left: 50px;
  width: 90%;
  border-style: solid;
}
    .item:active {
      opacity: .75;
    }

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

<script>

</script>

</head>
<body>
<!-- https://www.sitepoint.com/community/t/please-help-clonenode-attaching-to-wrong-div/399787 -->
<div id="outerContainer">
<div id="container">
<div style="  position: absolute;   top: 50px;  text-align: center; display: inline; border: 2px; ">
  <div class="item" class="one"  style=" position: absolute; left: 0px; top: 0; background-color: #F50000;" >1</div>
  <div class="item" class="one"  style=" position: absolute; left: 0px; top: 0; background-color: #F50000;" >1</div> 
  <div class="item" class="two" style=" position: absolute;  left: 40px; top: 0; background-color: #F5F5F5;" >2</div>
  <div class="item" class="two" style=" position: absolute;  left: 40px; top: 0; background-color: #F5F5F5;" >2</div>
  <div class="item" class="three"style=" position: absolute;  left: 80px; top: 0; background-color: #F5F5F5;" >3</div>
  <div class="item" class="three"style=" position: absolute;  left: 80px; top: 0; background-color: #F5F5F5;" >3</div>
  <div class="item" class="three"style=" position: absolute;  left: 120px; top: 0; background-color: #F5F5F5;" >4</div>
  <div class="item" class="three"style=" position: absolute;  left: 120px; top: 0; background-color: #F5F5F5;" >4</div>
  <div class="item" class="three"style=" position: absolute;  left: 160px; top: 0; background-color: #F5F5F5;" >5</div>
  <div class="item" class="three"style=" position: absolute;  left: 160px; top: 0; background-color: #F5F5F5;" >5</div>
  <div class="item" class="three"style=" position: absolute;  left: 200px; top: 0; background-color: #F5F5F5;" >6</div>
  <div class="item" class="three"style=" position: absolute;  left: 200px; top: 0; background-color: #F5F5F5;" >6</div>
  <div class="item" class="three"style=" position: absolute;  left: 240px; top: 0; background-color: #F5F5F5;" >7</div>
  <div class="item" class="three"style=" position: absolute;  left: 240px; top: 0; background-color: #F5F5F5;" >7</div>
</div>

<br>
<table   style="text-align: center; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody style="background-color:#636363;">
<tr style="height: 40px; border-bottom: 4x solid red;  border-top: 2px solid red;">
<td style="vertical-align: top;"><br>
</td>
</tr>

</tbody>
</table>
<p  contenteditable ="true"  class="p1" style=" border-color: green; position: absolute;  height: 100px; bottom: 0px; display: block;   " >Notes: 
</p>

</div>  <!--  id="container"  -->
</div>  <!--  id="outerContainer  -->

<!--
<script>
let items = document.querySelectorAll('.item');
items.forEach(item => { 
  item.addEventListener("dblclick", clone, true);
});

function clone(evt) {
  // get clicked item
  const clickedObject = document.getElementById(event.target.id);
  
  // clone it, add click event to it.
  let clonedObject = clickedObject.cloneNode(true);
  clonedObject.addEventListener("dblclick", clone);

  // add cloned object directly after clicked object
  clickedObject.after(clonedObject);
}
</script>
-->

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

      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("Dragging 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>

You’re attaching the drag event to the container instead of the appropriate elements you want to be draggable.

1 Like

Yes it is :slight_smile:

Move the table and the p out of the container if you don’t want them dragged.

Ah , BIG help .
Here’s what it looks like :slight_smile: now
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
Thanks All !

1 Like

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