Helper 的可拖动更改 HTML

Question

我认为这很简单，但要花几个小时寻找答案。我想要做的是“克隆”助手的可拖动 div，但稍微改变一下。以下是我想到的方法：

1) 在开始时检测可拖动的 id，创建或拖动事件，将 html 复制到变量，更改它，将其用作函数中的助手。这不起作用，因为助手是在开始或创建或拖动事件之前创建的，在这些事件中我会检测到可拖动的 id。 2）在辅助函数中检测可拖动的id，将html复制到变量，更改它，将其用作函数中的辅助函数。我不知道如何在辅助函数中获取可拖动的 id。 3) 使用克隆作为助手，然后通过创建、启动或拖动事件更改助手 html。

所以我需要知道两件事之一：

1) 如何在辅助函数中检测可拖动元素的 div id？要么 2) 触发启动或拖动事件时如何更改克隆助手的html？

相关代码如下：

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，

杰

Answer 1

将辅助函数移到draggable 定义之外对您不利。最好在内部创建函数，如下所示：

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

所以为了你的使用，你可以试试这个：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();
});

因此，现在您可以根据需要捕获 ID 或任何其他属性。将其存储在 data 中可以让您稍后使用它做一些事情，而不会与 id 属性发生冲突。