如何删除div名称jQuery拖放

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>