Css style

How to prevent Draggable from happening? – HTML & CSS – SitePoint Forums

Hello & TIA:
vanilla javascript
I have one

which insists on being draggable.
How to prevent 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 is a

but it is not draggable .
Draggable items are found at the very top of the page.
Namely a bunch of these:

div class=”item” class=”one” style=” position: absolute; left: 0px; top: 0; background color: #F50000;” >1
You can see the page here: https://vmars.us/Guitar/Guitar-7×2-Circles-DragDrop-1-Row-Table.html
Once there, try the drag and drop circles and try dragging and dropping the “note area”, it shouldn’t be possible to drag it.

Also the code is here:

https://vmars.us/Guitar/Guitar-7×2-Circles-DragDrop-1-Row-Table.html
file:///C:/drag-and-drop-ducks-master/Guitar-7×2-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;
    }
  






1
1
2
2
3
3
4
4
5
5
6
6
7
7


Notes:


You are attaching the drag event to the container instead of the appropriate elements you want to drag.



1 like