Draggable Change HTML of Helper

Question

I'd think this would be simple, but have search for hours for an answer. What I want to do is "clone" the draggable div for the helper, but change it slightly. Here are ways that I thought to do this:

1) Detect id of draggable in start, create or drag event, copy html to variable, change it, use it as helper in function. This does not work because helper is created before start or create or drag events in which I would detect the draggable id. 2) Detect id of draggable in the helper function, copy html to variable, change it, use it as helper in function. I could not figure how to get id of draggable in the helper function. 3) Use clone for helper and then change the helper html with create, start or drag event.

So I need to know one of two things:

1) How do I detect div id of draggable element in the helper function? or 2) How change I change the html of a cloned helper when the start or drag events are triggered?

Here is relevant code:

function initiate_draggable() {
  $('.project_box').draggable( {
      containment: 'document',
      cursor: 'move',
      revert: true,
      start: loadDragDIV, 
      helper: folder_helper,
      cursorAt:{top: 5, left: 5}
  } );
}

function loadDragDIV( event, ui ) {
    // How can I change the html of the helper here?
}

function folder_helper( event, ui ) {
  // How do I return id of draggable element here so I can copy the html, change it and return it?
   return changed_draggable_html;
}

TIA,

Jay

Answer 1

Moving the helper function outside the draggable definition works against you. It's best to create the function within, like so:

$(".project_box").draggable({
  helper: function(){
    return $("<div></div>").append($(this).html()).data("clone-id", $(this).attr("id"));
  }
});

So for your use, you might try this: https://jsfiddle.net/Twisty/2gno8cze/

HTML

<div class="project_box" id="pb-1">
  Drag Me
</div>

CSS

.project_box {
  background: #FFF;
  border: 1px solid #000;
  padding: 1em;
  width: 60px;
}

.box_helper {
  width: 60px;
  height: 1em;
  background: #ccc;
  border: 1px dashed #000;
}

jQuery

function initiate_draggable() {
  $('.project_box').draggable({
    containment: 'document',
    cursor: 'move',
    revert: true,
    //start: loadDragDIV,
    //helper: folder_helper,
    helper: function() {
      var content = $(this).html();
      var helper = $("<div>", {
        class: "box_helper"
      });
      helper.data("content", content);
      helper.data("box-id", $(this).attr("id"));
      return helper;
    },
    cursorAt: {
      top: 5,
      left: 5
    },
    stop: function(e, ui) {
      console.log("Clone of #" + ui.helper.data("box-id") + " Stopped.");
    }
  });
}

function loadDragDIV(event, ui) {
  // How can I change the html of the helper here?
  var cID = ui.helper.attr("id");
  ui.helper.data("current-id", cID);
}

function folder_helper(e, ui) {
  // How do I return id of draggable element here so I can copy the html, change it and return it?
  //return changed_draggable_html;
  var helper = $("<div>", {
    class: "box_helper",
    "data-current-id": $(this).data("current-id")
  });
  return helper;
}

$(function() {
  initiate_draggable();
});

So now you can capture the ID if you want or any other attributes. Storing it in data allows you to do something with it later without having conflicting id attributes.