如何知道拖动了哪个类draggable

Posted 2023-05-08

【中文标题】如何知道拖动了哪个类draggable

【英文标题】：how to know which class draggable has been dragged

【发布时间】：2020-03-25 00:48:01

【问题描述】：

我正在尝试获取已被拖动的类的名称。函数在下面给出。

.draggable，edit_draggable，这里是类

$(function() 
  $('.draggable').draggable(
    revert: "invalid",
    stack: "0",
    helper: 'clone'
  );

  $('.edit_draggable').draggable(
    revert: "true",
    stack: "0"
  );

  $('.droppable').droppable(
    accept: ".edit_draggable,.draggable",
    drop: function(event, ui) 
      $(this).find("input").remove();
      var droppable = $(this);
      var draggable = ui.draggable;
      draggable.clone().appendTo(droppable);

      $(this).find("input").attr("name", "headercols[]");
    
  );
);

【参考方案1】：

您可以为draggable 设置的drag 属性提供一个函数。此功能将在拖动开始时运行。您可以从该函数中的 ui 参数中获取对拖动元素的引用。试试这个：

$("#draggable").draggable(
  start: function(e, ui) 
    console.log(ui.helper.attr('id'));
    console.log(ui.helper.attr('class'));
  
);

<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/overcast/jquery-ui.css">
<div id="draggable" class="foo ui-widget-content">
  <p>Drag me around</p>
</div>