Jquery .data在可拖放区域的可拖放元素上一直没有定义

Jquery .data keeps going undefined on draggable element in droppable area

本文关键字：拖放 一直 定义 data 区域 Jquery 元素      更新时间：2023-09-26

我整个上午都在努力解决这个问题，我似乎不知道问题是什么。在我的页面上，我有一个可拖动的文本字段。(当你第一次把它拖到画布上时，它有一个静态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>

好的，那么这就是为什么当前的实现不工作:你有两个可放下的区域:

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

  1. 当您第一次拖动元素时，jquery ui将创建一个克隆并放入页面容器中。我们说克隆"no-id"。然后在可拉页中，"no-id"再次被这个

    克隆

    克隆= ui.helper.clone();…克隆。attr("id"、"item-text-1");

现在dom上有两个元素"no-id"answers"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可拖放被调用时，第一个id为"item-text-1"的元素将被删除，你将只拥有dom中最后一个可用的元素，它不再有数据了。

    从这里开始数据就丢失了。

    为了保存数据，您需要在克隆源对象后将其分配给新对象:

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

    通过这种方式，您将始终拥有数据，但要注意您的文本控件始终是一个新的，而不是原来的克隆。

    • 相关文章：