Question

我整个上午一直在努力解决这个问题，而我似乎无法弄清问题是什么。在我的页面上，我有一个可拖动的文本字段。（当你第一次将它拖到画布上时，它有一个用于测试目的的静态ID为＆＃34; item-text-1＆＃34;）

当我第一次在控制台日志中向下拖动项目时，您可以清楚地看到＆＃34; 1＆＃34;从$（＆＃34;＃item-text-1＆＃34;）。数据（＆＃34; test＆＃34;）中输出，但是当你继续拖动它几次时，它将开始转到＆＃34;未定义＆＃34;由于某种原因，我完全不知道如何解决这个问题。我尝试过做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会创建一个克隆并将其放入页面容器中。让我们说克隆＆＃34; no-id＆＃34;。然后在页面droppable中，＆＃34; no-id＆＃34;再次克隆了这个

cloned = ui.helper.clone（）; ... cloned.attr（＆＃34; id＆＃34;，＆＃34; item-text-1＆＃34;）;

现在你有两个元素＆＃34; no-id＆＃34;和＆＃34; item-text-1＆＃34;。当您通过id＆＃34; item-text-1＆＃34;将数据分配给元素时此数据将分配给具有该ID的单个元素。

在此处理程序完成之后，您将拥有第二个droppable处理程序，它还将在＆＃34; no-id＆＃34;上执行其逻辑。元素并将其从dom中删除。

ui.helper.remove（）;

现在您只剩下一个克隆：＆＃34; item-text-1＆＃34;。

当您第二次拖动剩余的克隆时，由于页面可放置处理程序，您将创建另一个克隆，并且您将有两个元素具有id＆＃34; item-text-1＆＃34;。

现在显示＆＃34; item-text-1＆＃34; element，因为byId将返回第一次出现，您将在第一次拖动之前看到之前的数据集。第二个元素没有附加数据。

当调用pagesWrapper droppable时，第一个元素的id为＆＃34; item-text-1＆＃34;将被移除，并且您将只拥有dom中可用的最后一个元素，该元素不再具有数据。

从此处数据丢失。

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

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

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

Jquery .data在droppable区域中的draggable元素上保持未定义状态

1 个答案: