jQuery .data在可放置区域中的可拖动元素上保持未定义状态

Question

我整个上午都在苦苦挣扎，似乎无法弄清楚问题是什么。 在我的页面上，我有一个可拖动的文本字段。 （当您第一次将其作为“ item-text-1”拖动到画布上时，它具有用于测试目的的静态ID）

当我第一次在控制台日志中向下拖动项目时，您可以清楚地看到$（“＃item-text-1”）。data（“ test”）输出的是“ 1”，但是当您继续将其拖动到几次，由于某种原因，它将开始变为“ undefined”，我完全不知道如何解决此问题。 我尝试做ui.helper.detached（），然后也将它们全部删除了，这时我迷路了。

<html>
<head>

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

    <script type="text/javascript">
    $( function() {

    function setDraggable(el, doClone) {
        el.draggable({
            helper: doClone ? 'clone' : "original"
        });
    }

$(".pages").droppable({
  accept: ".draggable",
  drop: function( event, ui ) {
    cloned = ui.helper.clone();
     cloned.removeClass('ui-resizable');
    var applyData = false;
    if (ui.draggable.hasClass('cloned') == false) {
         applyData = true;
          console.log("this is a clone!");
          cloned.addClass('cloned');
      }
                 cloned.find(".ui-resizable-handle").remove();
                 cloned.find(".ui-resizable").remove();
                 cloned.find("resizable").remove();
                 cloned.removeClass('ui-resizable');
          cloned.resizable().draggable();

    setDraggable(cloned, false)
    cloned.attr("id", "item-text-1");

    $( this )
    .append(cloned)

    if (applyData == true) {
        $("#item-text-1").data("test", "1");
         console.log($("#item-text-1").data("test"));
    } else {
        console.log($("#item-text-1").data("test"));
    }

      var newTop = $(ui.helper).offset().top - $(this).offset().top;
      var newLeft = $(ui.helper).offset().left - $(this).offset().left;

      cloned.css("top", newTop);
       cloned.css("left", newLeft);

    //ui.helper.detach();
  }
});
$(".pagesWrapper").droppable({
    accept: ".draggable",
      drop: function( event, ui ) {
    ui.helper.remove();
  }
})
setDraggable($(".draggable"), true);

    $( "#tab-container" ).tabs();
    } );

    </script>
</head>
<body style="text-align:center; margin: 0;">

<div id="template-container" style="width: 880px; height: 775px; background-color: #f3f3f3; margin: auto; border: 3px solid #636363; padding: 8px;">

    <div id="roles-tabs" style="padding-left: 0px; height: 90px; width: 100%; border-bottom: 1px solid #ddd;">
        <div id="button-container" style="float: left; width: 60px; height: 80px; display: block;">&nbsp;</div>

            <div id="tab-container" style="width: 600px; float: left; padding-right: 5px; padding-top: 5px; height: 80px;">
              <ul>
                <li><a href="#tabs-formfields">Data Fields</a></li>
              </ul>
              <div id="tabs-formfields">
              <table>
              <tbody>
              <tr>
              <td style="padding-right: 6px;">
                <div id="item-textfield" name="item-textfield" class="items-textfield draggable draggable-item" style="width: 100px; height: 30px; cursor: pointer; background-color: black; color: white; z-index: 99999">
                    <div class="new-textfield-field">
                        <div class="fake-data">Text Field</div>
                    </div>
                </div>
                </td>
                </tr>
                </tbody>
                </table>

              </div>
            </div>
    </div>

    <div id="showPDF" class="pdf-container pagesWrapper" style="z-index: 0; padding-top: 50px; width: 880px; padding-bottom: 50px; height: 515px; overflow-y: auto; background-color: #565656;">
        <div style="margin: auto;" class="canvas">

        <div id="page1" class="pages" style="position: relative; margin: auto; width: 400px; height: 500px; background-color: white;">

                </div><br /><br />

            </div>


    </div>
    <br/>
<br/>
<br/>
<br/>

</div>
</body>
</html>

Answer 1

好的，这就是当前实现无法正常工作的原因：您有两个可放置区域：

$(".pages").droppable({
...
and
$(".pagesWrapper").droppable({

第一次拖动元素时，jquery ui将创建一个克隆并将其放入页面容器中。 假设克隆为“ no-id”。 然后在可放下的页面中，以此再次克隆“ no-id”
克隆= ui.helper.clone（）; ... cloned.attr（“ id”，“ item-text-1”）;

现在在dom上有两个元素“ no-id”和“ item-text-1”。 当您通过ID“ item-text-1”将数据分配给元素时，该数据将分配给具有该ID的单个元素。

该处理程序完成后，您将拥有第二个可放置处理程序，该处理程序还将在“ no-id”元素上执行其逻辑，并将其从dom中删除。

ui.helper.remove（）;

现在您只剩下一个克隆：“ item-text-1”。

当您第二次拖动剩余的克隆时，由于可放置页面的处理程序，您将创建另一个克隆，并且您将拥有两个元素，其ID为“ item-text-1”。

现在，当您在“ item-text-1”元素中显示数据时，由于byId将返回第一个匹配项，因此您将在第一个拖动中看到之前的数据集。 第二个元素没有附加数据。

当将调用pagesWrapper droppable时，标识为“ item-text-1”的第一个元素将被删除，并且您将仅拥有dom中可用的最后一个元素，该元素不再具有数据。

从这里开始，数据丢失。

为了保留数据，在克隆源对象之后，需要将其分配给新对象：

cloned = ui.helper.clone();
cloned.data('test', ui.helper.data('test'));

这样，您将始终拥有数据，但是请注意，您的文本控件始终是新控件，而不是原始克隆。

jQuery .data在可放置区域中的可拖动元素上保持未定义状态

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-15 17:45:35

jQuery .data在可放置区域中的可拖动元素上保持未定义状态

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-15 17:45:35

解决方案1
1 已采纳 2016-09-15 17:45:35