CODEWITHSUNDEEP
jqueryjquery-uidraggablejquery-ui-droppabledroppable
arvindpundir
arvindpundir

Reputation: 47

how to know which class draggable has been dragged

I am trying to get name of class which has been dragged. function is giving below.

.draggable, edit_draggable , here are the classes 

$(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[]");
    }
  });
});

Upvotes: 0

Views: 275

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337700

You can provide a function to the drag property of the draggable settings. This function will run when dragging starts. You can get a reference to the dragged element from the ui argument in that function. Try this:

$("#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>

Upvotes: 0

Related Questions