Helper的可拖动更改HTML [英] Draggable Change HTML of Helper

问题描述

我认为这很简单，但是要花几个小时寻找答案.我想要做的是为助手克隆"可拖动的div，但要对其进行一些更改.以下是我认为要执行此操作的方法:

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)在开始，创建或拖动事件中检测可拖动的ID，将html复制到变量，对其进行更改，然后将其用作函数的帮助器.这是行不通的，因为助手是在启动或创建或拖动事件之前创建的，在该事件中我将检测可拖动的ID. 2)在辅助功能中检测可拖动的ID，将html复制到变量中，进行更改，将其用作功能中的辅助.我不知道如何在辅助函数中获取可拖动的ID. 3)将克隆用作帮助程序，然后使用create，start或drag事件更改帮助程序html.

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)如何在辅助函数中检测可拖动元素的div ID?或者 2)触发开始或拖动事件时，如何更改克隆的帮助器的html?

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?

以下是相关代码:

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，

周杰伦

推荐答案

将帮助器功能移到draggable定义之外对您不利.最好在其中创建函数，如下所示:

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"));
  }
});

因此，您可以尝试以下操作: https://jsfiddle.net/Twisty/2gno8cze/

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();
});

因此，现在您可以根据需要捕获ID或任何其他属性.将其存储在data中使您以后可以对它进行某些操作，而不会出现与id属性冲突的情况.

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.

这篇关于Helper的可拖动更改HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！