Get Dropped Elements Id Instead Of Drop Target Id

I am fairly new to jQuery and am stuck trying to get a dragged image elements id to append to the drop target instead of the image element itself or the drop targets id. I am using

Solution 1:

In the drop method looks like ev is the event object, so ev.target will refer to the element on which the item was dropped.

So use ev.target.id to refer to the drop target id.

functionallowDrop(ev) {
    ev.preventDefault();
}

functiondrag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
}

functiondrop(ev, target) {
    ev.preventDefault();
    console.log(target.id, ev.target.id)

    var data = ev.dataTransfer.getData("text/html");
    alert(data)
}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<divid="div1"ondrop="drop(event, this)"ondragover="allowDrop(event)"></div><br/><imgid="drag1"src="//placehold.it/336X69/ff0000"draggable="true"ondragstart="drag(event)"width="336"height="69" />

Solution 2:

Thanks to @Arun P Johny. Excellent work on this simple example.

However, I just wanted to add that if you try and drag from an "A" tag, you won't have much luck.

This will not work (in all browsers):

<adraggable="true"ondragstart="drag(event)"id="drag1"href="#"><imgsrc="//placehold.it/336X69/ff0000"width="336"height="69" /></a>

However this will work (in more browsers):

<img draggable="true" ondragstart="drag(event)"id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />

This took me a long time to discover this out, because many of the browsers don't return or let you get the source id of what you are dragging. This example should reveal the source id for you in an alert and also the console:

<script>functionallowDrop(ev) {
        ev.preventDefault();
    }

    functiondrag(ev) {
        ev.dataTransfer.setData('text', ev.target.id);
    }

    functiondrop(ev, target) {
        ev.preventDefault();
        console.log(target.id + " : " + ev.target.id) 
        console.log(ev.dataTransfer.getData("text/html")); 
        console.log(ev.dataTransfer.getData("text")); 
        var data = ev.dataTransfer.getData("text");
        alert(data)
    }
</script><style "type="text/css">#div1 
       { 
          width: 350px; 
          height: 70px; 
          padding: 10px; 
          border: 1px solid #aaaaaa; 
       }
</style><divid="div1"ondrop="drop(event, this)"ondragover="allowDrop(event)"></div><br/><imgid="drag1"src="http://placehold.it/336X69/ff0000"draggable="true"ondragstart="drag(event)"width="336"height="69" />

Solution 3:

I have created simple drag and drop example that maybe you can use as example for your problem. There are 4 boxes where images can be dropped to. Just grab a image from the list below and drop it into one of the boxes above. The code will alert the movement you have made.

HTML Code:

<divid="box1"class="empty">Box 1</div><divid="box2"class="empty">Box 2</div><divid="box3"class="empty">Box 3</div><divid="box4"class="empty">Box 4</div><divid="example1"class=" container list-group col" ><divid="image1"class="fill list-group-item"draggable="true"><imgsrc="https://source.unsplash.com/random/150x150"> Image 1
  </div><divid="image2"class="fill list-group-item"draggable="true"><imgsrc="https://source.unsplash.com/random/149x149"> Image 2
  </div><divid="image3"class="fill list-group-item"draggable="true"><imgsrc="https://source.unsplash.com/random/151x151"> Image 3
  </div><divid="image4"class="fill "draggable="true"><imgsrc="https://source.unsplash.com/random/152x152"> Image 4
  </div><divid="image5"class="fill"draggable="true"><imgsrc="https://source.unsplash.com/random/153x153"> Image 5
  </div><divid="image6"class="fill"draggable="true"><imgsrc="https://source.unsplash.com/random/154x154"> Image 6
  </div><divid="image7"class="fill"draggable="true"><imgsrc="https://source.unsplash.com/random/155x155"> Image 7
  </div><divid="image8"class="fill"draggable="true"><imgsrc="https://source.unsplash.com/random/156x156"> Image 8
  </div><divid="image9"class="fill"draggable="true"><imgsrc="https://source.unsplash.com/random/157x157"> Image 9
  </div><divid="image10"class="fill"draggable="true"><imgsrc="https://source.unsplash.com/random/158x158"> Image 10
  </div></div>

Javascript

const fills = document.querySelectorAll('.fill');
const empties = document.querySelectorAll('.empty');

let object="";
let destiny=""; 

// Fill listenersfor (const fill of fills) {
  fill.addEventListener('dragstart', dragStart);
  fill.addEventListener('dragend', dragEnd);
}

// Loop through empty boxes and add listenersfor (const empty of empties) {
  empty.addEventListener('dragover', dragOver);
  empty.addEventListener('dragenter', dragEnter);
  empty.addEventListener('dragleave', dragLeave);
  empty.addEventListener('drop', dragDrop);
}

// Drag FunctionsfunctiondragStart() {
  this.className += ' hold';
  setTimeout(() => (this.className = 'invisible'), 0);
  console.log('Start');
  objeto = this.id;
}

functiondragEnd() {
  //alert('Objeto: '+this.id);this.className = 'fill';
}

functiondragOver(e) {
  e.preventDefault();
}

functiondragEnter(e) {
  e.preventDefault();
  this.className += ' hovered';
}

functiondragLeave() {
  this.className = 'empty';
}

functiondragDrop() {
  //alert('Destino: '+this.id);this.className = 'empty';
  destino = this.id;
  showMove();
}

functionshowMove()
{
  alert('Moving object: '+objeto+' -> to : '+destino);
  console.log('Moving object: '+objeto+' to : '+destino);
}

https://codepen.io/iburguera/pen/jObLaKY?editors=1010