Helper 的可拖动更改 HTML

Question

我认为这很简单，但要搜索几个小时才能找到答案。我想要做的是 "clone" 助手的可拖动 div，但稍微改变一下。以下是我想到的方法：

1) 在启动、创建或拖动事件中检测draggable 的id，将html 复制到变量，更改它，将其用作函数中的助手。这是行不通的，因为助手是在开始之前创建的，或者是在创建或拖动事件之前创建的，我会在其中检测到可拖动的 id。 2) 在helper函数中检测draggable的id，将html复制到变量中，改变它，作为函数中的helper使用。我不知道如何在辅助函数中获取可拖动的 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 属性发生冲突。

Helper 的可拖动更改 HTML

Draggable Change HTML of Helper

jquery

jquery-ui

draggable

jquery-ui-draggable