Wsrtjtyk

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');

              }   

            }); 







    }

    });







  });

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>