Question

将DIV（人员NT，TVD，LZ或JVR）成功拖放到位置DIV后，我希望将名为“data-id”的属性值更新并存储到MySQL数据库中。我该怎么办呢？我被卡住了。

数据库包含以下列：id，name，img，position。我想写出要存储的位置（值为“data-id”）。

$(function() {
  $(".boxPersons").each(function(e) {
    var target = $(this).attr("data-id");
    $("#" + target).append($(this));
  });

  $(".boxPersons").draggable({
    revert: 'invalid',
    containment: '.box',
    cursor: 'move'
  });

  $(".openSpots, .box-persons").droppable({
    accept: ".boxPersons",
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;

      // Move draggable into droppable
      draggable.appendTo(droppable);
      draggable.css({
        top: '0px',
        left: '0px'
      });
    }
  });
});

Answer 1

试试这个

$(function() {
  $("#dragMe").draggable();
  $("#dropOnMe").droppable({
    drop: function(event, ui) {
      var $uiElement = $(ui.draggable), 
          id         = $uiElement.attr("id"),
          dataid     = $uiElement.attr("data-id"),
          dropid     = $(this).attr("data-id");
      console.log(id,dataid,dropid);
      $.post("someUrl",{id:id,dataid:dataid},function() {
        console.log("updated");
      });
      
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html(dataid+" Dropped!");
      $uiElement.attr("data-id",dropid).text("dropped on "+dropid); // set the dataid on the dragged  
    }
  });
});

#dragMe {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#dropOnMe {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dragMe" data-id="ABCDE"  class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="dropOnMe" class="ui-widget-header" data-id="DEFG">
  <p>Drop here</p>
</div>

Answer 2

您可以检查放置对象下的事件对象。比如 event.target 会给你拖动框的div id。同样，您可以访问其他属性并根据需要应用。

希望这会对你有所帮助。

jQuery - 在成功拖放后更改属性值

2 个答案: