Question

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

1）在启动时检测可拖动的id，创建或拖动事件，将html复制到变量，更改它，在函数中将其用作帮助器。这不起作用，因为在启动之前创建了帮助程序，或者创建或拖动我将检测可拖动ID的事件。 2）在辅助函数中检测draggable的id，将html复制到变量，更改它，在函数中将其用作帮助器。我无法想象如何在辅助函数中获得draggable的id。 3）使用clone for helper，然后使用create，start或drag事件更改helper html。

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

1）如何在辅助函数中检测draggable元素的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属性。

可拖动更改帮助程序的HTML

1 个答案: