Question

的继续

在这里，我将便笺从一个拖放到另一个。我有

 <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>

和便签

<?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;?>

演示

我的要求是我要拖放便笺并保存到数据库。现在我已经保存了位置。有什么方法可以保存列名？例如，如果将便笺从积压中拖到测试中，如何放置位置名是测试？请帮助我。

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

您可以创建一个数组，并使用可放置索引的位置选择该数组的值。

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>

如何删除div名称jQuery拖放

1 个答案: