Need help , Having problem with Drag n Drop ?

V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Hello & TIA ;
Hello & TIA ,

Need help , Having problem with Drag n Drop ?

My code seems quite simple , but I have been hung up for days :

The first DnD doesnt Drop : 'div id="itemContainer" '

Tha 2nd DnD works fine .\
JavaScript: 
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
    .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;
      z-index: 8;
    }

</style>
</head>
<body>

<h2>Drag and Drop</h2>
<br>
<div id="itemContainer"   id="dragItems"    ondrop="drop(event)"  ondragover="allowDrop(event)" class="POS"  style=" width:100%;  border: thick solid pink;"> 
<br>  <div class="item" class="flatOne"  id="flatOne"     draggable="true"   style="  background-color: yellow;" >b1</div>   
<br>  <div class="item" class="one"            draggable="true" ondragstart="drag(event)"  style="  background-color: #FF0004;" > 1</div>   
<br>  <div class="item" class="sharpOne"    draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♯1</div>   
<br>  <div class="item" class="naturalOne"  draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♮1</div>   
</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="RedCircle.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br><br><br><br>

<br>
<div  ondrop="drop(event)" ondragover="allowDrop(event)"  style=" border: thick solid blue; width:100%; height: 200px;">
</div>

<script>
function allowDrop(ev) {
  ev.preventDefault();
  console.log("function allowDrop(ev)")
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  console.log("function function drag(ev)")
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  console.log("function drop(ev)")
}
</script>

</body>
</html>
 
Padonak

Padonak

Joined
Jul 3, 2022
Messages
93
Reaction score
23
I believe this code can be optimized much more

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
#itemContainer{
border: thick solid pink;
}
body > div:last-of-type{
border: thick solid blue;
height: 200px;
}
.item {
display: inline-block;
border-radius: 50%;
touch-action: none;
user-select: none;
width: 32px;
height: 32px;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
}
.yellow{
background-color: yellow;
}
.red{
background-color: #ff0004;
}
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<div class="drp" id="itemContainer">
<br /><div class="item yellow" id="f1" draggable="true">b1</div>   
<br /><div class="item red" id="f2" draggable="true">1</div>   
<br /><div class="item yellow" id="f3" draggable="true">♯1</div>   
<br /><div class="item yellow" id="f4" draggable="true">♮1</div>   
</div>
<div class="drp" id="div1"><img src="https://www.thecodingforums.com/data/avatars/s/91/91247.jpg" width="50" draggable="true" id="drag1" /></div>
<div class="drp" id="div2"></div>
<div class="drp"></div>

<script>
[...document.querySelectorAll('.drp')].forEach( x => {x.addEventListener('drop', drop); x.addEventListener('dragover', allowDrop);} );
[...document.querySelectorAll('[draggable]')].forEach( y => y.addEventListener('dragstart', drag) );

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Hi Padonak , Thanks for your Reply:

Yes , I llke your optimized code , I will follow your example soon .
It took days to get Permission to Post ,
so here is where I am now .
Link 1)
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-10-Circles-4-Frets-CLONE-RO-WEB.html
view Source :
NOTE: How Fast you can Drag object ,
& how simple is the JS Code .
Instructions: Click on any Colored Circle , then Drag-Drop Circle onto fretBoard .

What I want to achieve now is:
to be able to Drop Circle Anywhere on Page & Drag FAST .
Link 2)
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
view Source :
Here: I can Drop Circle anywhere on Page , But
NOTE: How SLOW you have to Drag , ELSE Circle gets Dropped , & you have to go Back again & again .
The JS is very cool , BUT it is sooo SLOW .

How can I have both Fast Drag Speed and Drop anywhere on page ?

Thanks for your Help...
 
Padonak

Padonak

Joined
Jul 3, 2022
Messages
93
Reaction score
23
Hi there! Here is the link to a good article about DnD. The article is in russian, but you can choose the language in the top left corner of the page
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Hello Padonak ,
Thanks for this https://javascript.info/ . It has set me on the Correct Path .
Here is the original (Link1) https://vmars.us/Guitar/Drag-Drop-ANYWHERE-javascript.info-ORIGINAL.html
Here is me Tinkering with it (Link2) https://vmars.us/Guitar/Drag-Drop-ANYWHERE-javascript.info.html

I have figured out How To get Element Id onclick="getId(this)"
JavaScript: 
<script>
  function getId(btn){
  console.log(btn.id)
  var clickedElementId = 'btn.id'
//  onmousedown(clickedElementId);
  }
</script>

Evidently the onmousedown event overrides the onClick event .
Because there will be many more images to deal with , at least 10 to start ,
and each time the user clicks on one of the original 10 images , a duplicate image is cloned (to drag around the fretboard) .
For example see here: https://vmars.us/Guitar/DnD-2-Circles-4-Frets-CLONE-IMAGE.html

So how else or where else can I onclick="getId(this)" .
Can I somehow embed it into the movemouseEvent ?

Thanks for your Help...
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Hello

I can get id="" of these guys:

JavaScript: 
  <img class="elem" id="elem800"  onclick="getId(this)"  draggable="true" src="flatAccidental-Grey-vm.png"      style="cursor.pointer"  width="24px" height="24">

  <img class="elem" id="elem900"  onclick="getId(this)"  draggable="true" src="naturalAccidental-Grey-vm.png" style="cursor.pointer"  width="24px" height="24">

  <img class="elem" id="elem1000" onclick="getId(this)"  draggable="true" src="sharpAccidental-Grey-vm.png"   style="cursor.pointer"  width="24px" height="24px">

with this:

JavaScript: 
  function getId(btn){

      clickedElementId = btn.id

      console.log(btn.id + '  function getId(btn')

//      document.addEventListener('mousemove', onMouseMove);

  }

But not for 'ball' ;
If I try to add this onclick="getId(this)" to 'ball' ,
then I can no longer DROP 'ball' anywhere on page .

So Pls , how can I run getId function and still Drag all id's ?

https://vmars.us/Guitar/Drag-Drop-ANYWHERE-javascript.info.html

Thanks
 
Last edited:
Padonak

Padonak

Joined
Jul 3, 2022
Messages
93
Reaction score
23
You can make DnD process based on, for example, class attribute. This way all the elements having the mentioned className will become draggable:

HTML: 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag-n-Drop-ANYWHERE-javascript-info.html</title>
<base href="https://vmars.us/Guitar/" />
<style>
.elem {
cursor: pointer;
}
[id^=el]{
width: 24px;
height: 24px;
}
#ball{
width: 40px;
height: 40px;
}
#fretBoard{
width: 1400px;
height: 250px;
}

</style>
</head>
<body>
<p>Drag the Accidental.</p>
  <img class="elem" id="el800" src="flatAccidental-Grey-vm.png" />
  <img class="elem" id="el900" src="naturalAccidental-Grey-vm.png" />
  <img class="elem" id="el1000" src="sharpAccidental-Grey-vm.png" />
  <img class="elem" id="ball" src="https://js.cx/clipart/ball.svg" />
  <img id="fretBoard" src="Fretboard-Table-Image-624x114.png" /->
<script>
  document.querySelectorAll('.elem').forEach( x => {
 
    x.onmousedown = function(event) {
      x.style.position = 'absolute';
      x.style.zIndex = 1000;
      document.body.appendChild(x);

      moveAt(event.pageX, event.pageY);

      function moveAt(pageX, pageY) {
        x.style.left = pageX - x.offsetWidth / 2 + 'px';
        x.style.top = pageY - x.offsetHeight / 2 + 'px';
      }

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);
      }

      document.addEventListener('mousemove', onMouseMove);

      x.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        x.onmouseup = null;
      };

    };
   
    x.ondragstart = function() {
      return false;
    };
   
    });
  </script>
 </body>
</html>

And to make your code much readable please keep on mind that you can easily evade those repeating attributes in the markup by putting them into the css. Hope you understand my disgusting english ))
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop... 1
I am trying to detect Which image id="" was clicked ? 22
When draggable=false & draggable=true dont work ? 1
? Trouble with: passing dragElement(e.target.id); 8
Help with Visual Lightbox: Scripts 2
Having trouble centering contents of td ? 3
Help me sort out this script 1
Help with my responsive home page 2

Members online

Total: 178 (members: 2, guests: 176)
Robots: 500

Forum statistics

Threads
473,913
Messages
2,570,027
Members
46,419
Latest member
businessfunding

Latest Threads

Top