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

Posted 2023-05-08

【中文标题】jQuery - 成功拖放后更改属性值

【英文标题】：jQuery - Change attribute value after succesfull Drag and Drop

【发布时间】：2017-12-15 13:01:33

【问题描述】：

在将 DIV（人 NT、TVD、LZ 或 JVR）成功拖放到位置 DIV 后，我希望名为“data-id”的属性值将被更新并存储到 mysql 数据库中.我该如何管理？我被卡住了。

数据库有以下列：id、name、img、position。我想写要存储的位置（值是“data-id”）。

现场演示：planning.dutch-quality.nl

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

【问题讨论】：

可能重复***.com/questions/5562853/…

【参考方案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>

【讨论】：

如果我使用这个脚本，它不会更新拖拽元素的 data-id 值，应该从 drop 元素中获取。知道如何管理它吗？

看看更新。应该足以满足您的需要吗？

谢谢@mplugjan！

【参考方案2】：

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

希望这会对你有所帮助。