个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 06:06:31 27 4
gpt4 key购买 nike

我整个早上都在努力解决这个问题，但我似乎不明白问题出在哪里。在我的页面上有一个可拖动的文本字段。 (当您第一次将其作为“item-text-1”拖到 Canvas 时，它有一个用于测试目的的静态 ID)

当我第一次在控制台日志中向下拖动该项目时，您可以清楚地看到从 $("#item-text-1").data("test") 输出“1”，但是当您继续拖动时大约几次后，由于某种原因它会开始变得“​​未定义”，我完全不知道如何解决这个问题。我尝试执行 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”和“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 将返回第一个出现的位置，因此您将在第一次拖动时看到之前设置的数据。第二个元素没有附加任何数据。

    当调用 pageWrapper droppable 时，第一个 id 为“item-text-1”的元素将被删除，并且您将只有 dom 中的最后一个可用元素，该元素不再包含数据。

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

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

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

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

    关于javascript - Jquery .data 在可放置区域中的可拖动元素上保持未定义状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39517026/

    27 4 0
    文章推荐： Javascript onblur 无法正常工作
    文章推荐： javascript - 从函数中传递变量作为参数
    文章推荐： javascript - 无限循环而不是移动到下一个文件夹
    文章推荐： javascript - webpack 开发服务器路由问题
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com