How to get dropped div name jquery drag and drop - php

Question

This is continuation of my question first question
Here i am drag and drop sticky notes from one to another. i have
<div class="rTable">
<div class="rTableRow">
<div id="a" title="Backog" class="rTableHead rTabletd"><strong>Backlog</strong></div>
<div id="a" title="WIP" class="rTableHead rTabletd"><span style="font-weight: bold;">WIP</span></div>
<div id="a" title="Testing" class="rTableHead rTabletd">Testing</div>
<div id="a" title="DOD" class="rTableHead rTabletd">DOD</div>
</div>
<div class="rTableRow rTableh" >
<div class="rTableCell"></div>
<div class="rTableCell"><a></a></div>
<div class="rTableCell"></div>
<div class="rTableCell"></div>
</div>
</div>
and sticky notes
<?php
foreach ($this->getallstores as $stories):
?>
<div id="draggable-<?php echo $stories['id']; ?>" class="draggable " onchange="javascript:position(this)" style="position:absolute; left: <?php echo $stories['_left']; ?>px; top: <?php echo $stories['_top']; ?>px">
<img class="pin" src="/manage/public/img/pin.png" alt="pin" />
<blockquote class="quote-box note-<?php echo $stories['color']; ?>">
<p class="quote-text" id="content-<?php echo $stories['id'];?>">
<?php echo $stories['message']; ?>
</p>
<hr>
<div class="blog-post-actions">
<p>
<button class="btn btn-primary popEdit pull-left" data-toggle='tooltip' title="Edit" onClick="popOverEdit(<?php echo $stories['id'];?>)" id="pop-<?php echo $stories['id'];?>"><span class="glyphicon glyphicon-edit"></span></button>
<div class="popover-markup blog-post-bottom" >
<div class="head hide">Edit</div>
<div class="content hide" id="popoverContent<?php echo $stories['id'];?>">
<div class="form-group">
<textarea id="<?php echo $stories['id']; ?>" class="quick" ><?php echo $stories['message']; ?></textarea>
</div>
<button data-vendor-id="" data-act="send" onClick="getText(<?php echo $stories['id'];?>)" class="btn btn-info save_notes">Save</button>
</div>
</div>
</p>
<p class="blog-post-bottom pull-right">
<a class="delete" href="?delete=<?php echo $stories['id']; ?>" style="float:right"> <button class="btn btn-danger" title="delete"><span class="glyphicon glyphicon-trash"></span></button> </a>
</p>
</div>
</blockquote>
</div>
<?php endforeach;?>
demo
my requirement is i want to drag and drop stickys and save to database.Now i have save position.is there any way to save column name?eg if drag sticky note from backlog to testing how can i get placed position name is testing?Please help me.
jquery
jQuery(function() {
jQuery( ".draggable" ).draggable({ containment: "#containment-wrapper", scroll: false ,
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var id=$(this).attr('id');
var ti=$(".rTabletd").attr("title");
var Stoppos = $(this).position();
model = {
id:id,
left: Stoppos.left,
top: Stoppos.top
};
$.ajax({
url: "/scrum/save",
type: "post",
data: model,
success: function(data){
jQuery.HP({
title: "Success!",
message: "Saved..."
});
},
error:function(){
// alert('error is saving');
}
});
}
});
});

Answer 1

You can create an array and use the droppable index position to select the array value.
var table = ['Backlog', 'WIP', 'Testing', 'DOD'];
$(".rTableCell > div").draggable();
$(".rTableCell").droppable({
drop: function(event, ui) {
var table = ['Backlog', 'WIP', 'Testing', 'DOD'];
var droppedOn = event.target;
alert(table[$(droppedOn).index()]);
}
});
.rTableHead,
.rTableCell {
display: inline-block;
width: 23%;
}
.rTableCell {
border: 1px solid black;
height: 100vh;
}
.rTableCell>div {
background-color: blue;
padding: 5px;
color: white;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="rTable">
<div class="rTableRow">
<div id="backlog" title="Backog" class="rTableHead rTabletd"><strong>Backlog</strong></div>
<div id="WIP" title="WIP" class="rTableHead rTabletd"><span style="font-weight: bold;">WIP</span></div>
<div id="TESTING" title="Testing" class="rTableHead rTabletd"><span style="font-weight: bold;">Testing</span></div>
<div id="DOD" title="DOD" class="rTableHead rTabletd"><span style="font-weight: bold;">DOD</span></div>
</div>
<div class="rTableRow rTableh">
<div class="rTableCell">
<div>
Item 1
</div>
</div>
<div class="rTableCell">
<div>
Item 2
</div>
</div>
<div class="rTableCell">
<div>
Item 3
</div>
</div>
<div class="rTableCell">
<div>
Item 4
</div>
</div>
</div>
</div>