Drag and Drop. Getting the id where the element is being dragged FROM

Question

I'm having trouble getting the id of the outer div the draggable element is being taken from.

Here is my HTML http://dev.eteacher.online/taskAssets/cup.jpg'/>

///Droppables ".snap"

<div id="0" class='col-word'><p class="letters">c</p></div>
<div id="1" class='col-word snap' style=""><p class="letters">__</p></div>
<div id="2" class='col-word snap' style=""><p class="letters">__</p></div>

///Draggables

<div id="comparison">
    <div id="v"  class='col-letter'><p class="letters">v</p></div>
    <div id="p"  class='col-letter'><p class="letters">p</p></div>
    <div id="u"  class='col-letter'><p class="letters">u</p></div>
</div>

Then I have the important jQuery

   var  beh = new Array();
    var beh2 = "";
    var MyVar = "";

    $(".col-letter").draggable({ cursor: 'move', snap: '.snap',
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("ui-draggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        },
        drag: function(event, ui){
                    if($(this).data('droppedin')){
            $(this).data('droppedin').droppable('enable');
            $(this).data('droppedin',null);
            $(this).removeClass( 'dropped' );
             MyVar =  $(this).closest(".col-word").attr("id");   
             alert(MyVar); 
            beh[MyVar] = "";
             alert(beh);
         }
        }
    });
$(".snap").droppable({
    hoverClass: 'hovered',
    tolerance: 'pointer',
    drop: function(event, ui) {    
    var drop_p = $(this).offset();
    var drag_p = ui.draggable.offset();
    var left_end = drop_p.left - drag_p.left;
    var top_end = drop_p.top - drag_p.top ;
    ui.draggable.animate({
        top: '+=' + top_end,
        left: '+=' + left_end
    });
    ui.draggable.addClass( 'dropped' );

   ui.draggable.data('droppedin',$(this));
     $(this).droppable('disable');

}
});


$( ".snap" ).on( "drop", function( event, ui ) {

    MyVar = $(this).parent().attr('id');
    beh[MyVar] = ui.draggable.attr('id');
    alert(beh[MyVar] + " " + MyVar);
  //  alert(beh);

    //beh[] = new Array($(this).attr('id'), ui.draggable.attr('id'));
   //alert(beh);
});

Basically you can drag divs in and out of the .snap class. I want to get the id of the .snap class when I drag the divs off of the .snap.

I'm having trouble doing this. The closest function is bringing me undefined!

Any ideas?

EDIT Goal: The goal is to know which id for each col-letter gets placed on which .snap class.

The way to I thought it out was to have a get request once a button is pressed such that the position and the letter are provided.

For example, if you place id=v on id=1. the get request will enable /1v.

EDIT 2

This worked!

$(".snap").on("drop", function(event, ui) {
     MyVar = ui.helper.attr('id');
     beh[MyVar] = $(this).attr('id') + ui.helper.attr('id');
     alert(beh[MyVar]);
   });

But it makes my join command stop working!

  $( "#done" ).click(function(){
        beh2 = beh.join("");
        var link = "/task/fillLetters/response/"+ beh2;
        alert(beh2);
        window.location.replace(link);
});

Any ideas?

Answer 1

The following will get you the id of both the dragged element and dropped element..

   $(".snap").on("drop", function(event, ui) {
       MyVar = $(this).attr('id');
       beh[MyVar] = ui.helper.attr('id');
       alert(MyVar + " " + beh[MyVar]);
   });

Same goes with your drag function use

MyVar = $(this).attr('id'); //to get your id

Fiddle

https://jsfiddle.net/2a6tur6w/3/

Answer 2

I think this is what you need

fiddle link https://jsfiddle.net/bksL352s/

var beh = new Array();
var beh2 = "";
var MyVar = "";

$(".col-letter").draggable({
  cursor: 'move',
  snap: '.snap',
  revert: function(event, ui) {

    $(this).data("ui-draggable").originalPosition = {
      top: 0,
      left: 0
    };

    return !event;

  },
  drag: function(event, ui) {
    if ($(this).data('droppedin')) {
      $(this).data('droppedin').droppable('enable');
      $(this).data('droppedin', null);
      $(this).removeClass('dropped');
      MyVar = $(this).attr('data-dropped-Id');
      alert(MyVar);
      beh[MyVar] = "";
      alert(beh);

    }
  }
});
$(".snap").droppable({
  hoverClass: 'hovered',
  tolerance: 'pointer',
  drop: function(event, ui) {
    var drop_p = $(this).offset();
    var drag_p = ui.draggable.offset();
    var left_end = drop_p.left - drag_p.left;
    var top_end = drop_p.top - drag_p.top;
    ui.draggable.animate({
      top: '+=' + top_end,
      left: '+=' + left_end
    });
    ui.draggable.addClass('dropped');

    ui.draggable.data('droppedin', $(this));
    $(this).droppable('disable');

  }
});


$(".snap").on("drop", function(event, ui) {
  MyVar = event.target.getAttribute('id');
  beh[MyVar] = ui.draggable.attr('id');
  ui.draggable.attr('data-dropped-Id', $(this).attr('id'));
  alert(beh[MyVar] + " " + MyVar);

});

.col-letter {
  display: inline-block;
  border: 1px solid #ccc;
  background: #eee;
  margin: 10px 0;
  transition: background ease-In .2s;
}
.col-word.snap {
  display: inline-block;
  border: 1px solid #000;
  background: #C5C5C5;
}
.dropped p {
  background: #CDDC39 !important;
}
.dropped {
  border-color: #000 !important;
}
.col-word.snap p {
  margin: 0;
  padding: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 1.5;
}
.col-letter p {
  margin: 0;
  padding: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 1.5;
  cursor: move;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="0" class='col-word'>
  <p class="letters">c</p>
</div>
<div id="1" class='col-word snap' style="">
  <p class="letters">__</p>
</div>
<div id="2" class='col-word snap' style="">
  <p class="letters">__</p>
</div>


<div id="comparison">
  <div id="v" class='col-letter'>
    <p class="letters">v</p>
  </div>
  <div id="p" class='col-letter'>
    <p class="letters">p</p>
  </div>
  <div id="u" class='col-letter'>
    <p class="letters">u</p>
  </div>
</div>

Hope this helps..:)

Answer 3

Why can't you store the value with the onclick handler and then retrieve it when you 'drop'?

var draggedItem 
$(".snap").on("drag", function(event, ui) {
 draggedItem = $(this).attr('id');
});

$(".snap").on("drop", function(event, ui) {
  alert(draggedItem) 
});

Answer 4

You are after event.target in your 'drop' handler...

$(".snap").on("drop", function(event, ui) {  
    MyVar = $(event.target).attr('id');   // here
    beh[MyVar] = ui.draggable.attr('id');
    alert(beh[MyVar] + " " + MyVar);
});

fiddle: https://jsfiddle.net/zoa3wL0n/